/* ============================================================
   LIFT Mocktails — Miami Rooftop palette overlay
   Loaded AFTER base.css and version-b.css.
   Softens the mahogany/brass masculine palette toward
   sunset pink / magenta / coral / soft twilight.
   Additive only — does not remove speakeasy DNA, just shifts
   the accent temperature toward feminine Miami rooftop.
   ============================================================ */

:root {
  /* Base surfaces stay dark for cinematic hero contrast,
     but shift toward plum/aubergine instead of mahogany-brown */
  --bg:           #1a0f1a;   /* near-black plum */
  --bg-elev:      #291626;   /* aubergine mid */
  --bg-card:      #3a1e34;   /* aubergine card */

  /* Warm cream stays — ivory reads great on both palettes */
  --ivory:       #f4ebd8;
  --ivory-soft:  #ecdfc7;
  --paper:       #f9f3e6;
  --line:        #7a4a6a;   /* dusty rose hairline replaces bronze */

  /* Brand accents — shift from brass/amber/crimson to
     coral / rose gold / magenta / hot pink */
  --brass:        #d98f7b;   /* coral-rose replaces bronze */
  --brass-bright: #f2b4a0;   /* peach-blush highlight */
  --amber:        #ff7a8a;   /* hot pink replaces amber */
  --crimson:      #e0335f;   /* magenta-red replaces crimson */

  /* SKU signature colors — each canon gets a rooftop palette */
  --sku-lemon:   #f2c94c;   /* sunlit gold (poolside golden hour) */
  --sku-marg:    #7fd4b0;   /* mint-teal (twilight patio) */
  --sku-of:      #ff9a6a;   /* burnt-coral (dusk rooftop) */
  --sku-cosmo:   #ff4d8a;   /* electric hot pink (nightclub magenta) */
}

/* ------------------------------------------------------------
   Type accent — the "canons.", "lifted.", "party trick." etc.
   italic accent words currently use --amber (was warm gold).
   Now they should glow hot-pink-coral for Miami vibes.
   Selectors match the actual DOM (checked in index.html).
   ------------------------------------------------------------ */
.hero-title em,
.section-title em,
.accent-word,
.script-accent {
  color: var(--amber);
  background: linear-gradient(
    92deg,
    var(--brass-bright) 0%,
    var(--amber) 45%,
    var(--crimson) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 122, 138, 0.25));
}

/* ------------------------------------------------------------
   Hero — hairline glow shifts from brass to magenta
   ------------------------------------------------------------ */
.hero {
  /* Update hero image alt semantics via CSS is not possible;
     but we can layer a very subtle pink/purple gradient scrim
     so the hero blends into the Miami palette even if the
     JPG behind still has some amber notes. */
}

.hero::after {
  /* dimmed magenta bottom vignette — let the photo breathe */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 70%,
    rgba(60, 20, 55, 0.06) 90%,
    rgba(60, 20, 55, 0.15) 100%
  );
}

/* ------------------------------------------------------------
   Buttons — CTA fills use coral gradient instead of brass
   ------------------------------------------------------------ */
.btn.btn-primary,
.btn-primary,
.cta-primary {
  background: linear-gradient(135deg, var(--brass-bright) 0%, var(--amber) 100%);
  color: #1a0f1a;
  border-color: var(--amber);
  box-shadow: 0 4px 24px rgba(255, 122, 138, 0.28);
}

.btn.btn-primary:hover,
.btn-primary:hover,
.cta-primary:hover {
  background: linear-gradient(135deg, var(--amber) 0%, var(--crimson) 100%);
  color: var(--ivory);
  box-shadow: 0 6px 32px rgba(224, 51, 95, 0.4);
}

/* Outlined buttons — coral border */
.btn.btn-ghost,
.btn-ghost,
.btn-secondary {
  border-color: var(--brass-bright);
  color: var(--brass-bright);
}
.btn.btn-ghost:hover,
.btn-ghost:hover,
.btn-secondary:hover {
  background: var(--brass-bright);
  color: #1a0f1a;
  border-color: var(--brass-bright);
}

/* ------------------------------------------------------------
   Section headers — subtle magenta hairline instead of bronze
   ------------------------------------------------------------ */
.eyebrow,
.section-eyebrow,
.kicker {
  color: var(--brass-bright);
}

/* ------------------------------------------------------------
   Menu ribbon — canon signature glow follows Miami palette
   ------------------------------------------------------------ */
.menu-item[data-canon="lemon"] .menu-ribbon { background: var(--sku-lemon); }
.menu-item[data-canon="marg"]  .menu-ribbon { background: var(--sku-marg); }
.menu-item[data-canon="of"]    .menu-ribbon { background: var(--sku-of); }
.menu-item[data-canon="cosmo"] .menu-ribbon { background: var(--sku-cosmo); }

/* ------------------------------------------------------------
   FAQ / accordion — subtle magenta hover
   ------------------------------------------------------------ */
.faq-q:hover,
summary.faq-q:hover {
  color: var(--amber);
}

/* ------------------------------------------------------------
   Footer + nav — swap bronze hairlines to soft plum-rose
   ------------------------------------------------------------ */
.nav,
.site-footer,
footer {
  border-color: var(--line);
}

/* ------------------------------------------------------------
   Selection color for text — matches accent
   ------------------------------------------------------------ */
::selection {
  background: var(--amber);
  color: #1a0f1a;
}

/* ------------------------------------------------------------
   Body-wide subtle warm-pink ambient tint on dark surfaces —
   almost imperceptible, but shifts the emotional temperature.
   ------------------------------------------------------------ */
body {
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(224, 51, 95, 0.06) 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(255, 122, 138, 0.05) 0%, transparent 60%),
    var(--bg);
}