/* ============================================================
   liitt — Fairy Flame · Brand Tokens (Direction D — Editorial)
   Drop into: src/fairyflame/assets/css/tokens.css
   Implementation target: static Liquid HTML + Campaign Cart SDK.
   Plain CSS only — no preprocessor required.
   ============================================================ */

/* Fonts loaded via layout <link> — see base-presell.html / checkout frontmatter */

:root {
  /* ---- Colour · backgrounds & surfaces ---- */
  --ff-bg-base:          #0B0A1C;  /* page background */
  --ff-bg-section-alt:   #14122E;  /* alternating sections */
  --ff-surface:          #1C1A3A;  /* cards, inputs */
  --ff-surface-raised:   #252247;  /* elevated panels, modals */

  /* ---- Colour · borders ---- */
  --ff-border-subtle:    rgba(244, 241, 232, 0.10);  /* default card/input borders */
  --ff-border-emphasis:  #E8B84A;                     /* selected / focus borders */

  /* ---- Colour · accents ---- */
  --ff-accent-gold:        #E8B84A;  /* CTAs, price, logo, links */
  --ff-accent-gold-bright: #F5C542;  /* hover / glow state */
  --ff-accent-indigo:      #4B40C9;  /* secondary highlights */
  --ff-accent-raspberry:   #B23A6E;  /* flavour tag, tertiary */

  /* ---- Colour · text ---- */
  --ff-text-primary:    #FFFFFF;  /* headlines */
  --ff-text-body:       #C9C3DC;  /* body copy */
  --ff-text-muted:      #8E88A8;  /* captions, secondary */
  --ff-text-on-accent:  #14122E;  /* text on gold buttons — NEVER white on gold */

  /* ---- Colour · semantic ---- */
  --ff-positive:  #4FB477;  /* success, in-stock */
  --ff-negative:  #E5604D;  /* errors, low-stock */

  /* ---- Typography · families ---- */
  --ff-font-display: 'Bricolage Grotesque', sans-serif;  /* headlines, price, CTA */
  --ff-font-body:    'Newsreader', Georgia, serif;        /* editorial body, descriptions, quotes */
  --ff-font-ui:      'Hanken Grotesk', system-ui, sans-serif; /* nav, labels, forms, captions */

  /* ---- Typography · scale (size / line-height / tracking) ---- */
  --ff-text-display:  64px;  /* H1  · display 800 · lh .95 · -2px */
  --ff-text-h2:       34px;  /* section 700 · lh 1.05 · -1px */
  --ff-text-h3:       24px;  /* 700 · lh 1.15 · -.5px */
  --ff-text-price:    40px;  /* display 800 · lh 1 · -1px */
  --ff-text-body-lg:  17px;  /* body 400 · lh 1.6 */
  --ff-text-body-sm:  15px;  /* body 400 · lh 1.55 */
  --ff-text-ui:       13px;  /* nav/ui 700 · lh 1.4 · 1.5px UC */
  --ff-text-eyebrow:  12px;  /* label 800 · 2px UC */
  --ff-text-caption:  12px;  /* caption 500 · lh 1.4 */

  /* ---- Spacing (8-based) ---- */
  --ff-space-1:   4px;
  --ff-space-2:   8px;
  --ff-space-3:   12px;
  --ff-space-4:   16px;
  --ff-space-6:   24px;
  --ff-space-8:   32px;
  --ff-space-12:  48px;
  --ff-space-14:  56px;
  --ff-space-18:  72px;

  /* ---- Layout ---- */
  --ff-max-width:        1200px;
  --ff-section-pad-y:    72px;
  --ff-section-pad-x:    40px;
  --ff-gap-hero:         56px;
  --ff-gap-option-cards: 12px;
  --ff-sticky-bar-h:     88px;  /* reserve as body padding-bottom on mobile */

  /* ---- Radius ---- */
  --ff-radius-sm:   8px;    /* inputs, badges */
  --ff-radius-md:   10px;   /* buttons (brand default — soft rectangle) */
  --ff-radius-lg:   16px;   /* option / bundle cards */
  --ff-radius-xl:   20px;   /* images, panels */
  --ff-radius-pill: 999px;  /* tags; swap into CTAs here if you prefer a pill */

  /* ---- Shadow & glow ---- */
  --ff-shadow-card:    0 12px 40px rgba(5, 3, 18, 0.45);
  --ff-shadow-raised:  0 24px 70px rgba(5, 3, 18, 0.60);
  --ff-glow-gold:      0 8px 30px rgba(232, 184, 74, 0.45);   /* CTA hover */
  --ff-glow-gold-soft: 0 8px 30px rgba(232, 184, 74, 0.22);  /* selected card */

  /* ---- Breakpoints (reference — use in @media) ---- */
  /* 1280px · 991px · 767px · 479px (Olympus / checkout standard) */

  /* ---- Legacy aliases (presell / older CSS) ---- */
  --ff-gold: var(--ff-accent-gold);
  --ff-gold-soft: var(--ff-accent-gold-bright);
  --ff-gold-pale: var(--ff-accent-gold-bright);
  --ff-purple: var(--ff-accent-indigo);
  --ff-purple-light: #6B5FE0;
  --ff-font-serif: var(--ff-font-display);
  --ff-font-sans: var(--ff-font-ui);
  --ff-text-body-alt: var(--ff-text-body);
  --ff-text-faint: var(--ff-text-muted);
  --ff-text-dim: var(--ff-text-muted);
  --ff-text-on-gold: var(--ff-text-on-accent);
  --ff-radius-card: var(--ff-radius-lg);
  --ff-radius-panel: var(--ff-radius-xl);
  --ff-radius-chip: var(--ff-radius-pill);
  --ff-shadow-deep: var(--ff-shadow-raised);
  --ff-shadow-gold-glow: var(--ff-glow-gold);
  --ff-footer-bg: var(--ff-bg-base);
  --ff-surface-highlight: var(--ff-surface-raised);
  --ff-border-interior: var(--ff-border-subtle);
  --ff-border-focus: var(--ff-border-emphasis);
  --ff-neutral: var(--ff-text-muted);
  --ff-max-width: var(--ff-max-width);
  --ff-section-padding: var(--ff-section-pad-y) var(--ff-section-pad-x);
  --ff-gap-lg: var(--ff-space-6);
  --ff-gap-md: var(--ff-space-4);
  --ff-card-padding: var(--ff-space-8);
}

/* ============================================================
   Optional base utilities — safe defaults, override freely.
   ============================================================ */
body,
body.ff-presell-page {
  background: var(--ff-bg-base);
  color: var(--ff-text-body);
  font-family: var(--ff-font-body);
  font-size: var(--ff-text-body-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.ff-presell-page {
  padding-bottom: var(--ff-sticky-bar-h);
}

h1, h2, h3, .ff-display {
  font-family: var(--ff-font-display);
  color: var(--ff-text-primary);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.ff-eyebrow {
  font-family: var(--ff-font-ui);
  font-weight: 800;
  font-size: var(--ff-text-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ff-accent-gold);
}

.ff-price {
  font-family: var(--ff-font-display);
  font-weight: 800;
  font-size: var(--ff-text-price);
  letter-spacing: -1px;
  color: var(--ff-accent-gold);
}

/* Primary CTA */
.ff-btn {
  font-family: var(--ff-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--ff-text-on-accent);
  background: var(--ff-accent-gold);
  border: none;
  padding: 16px 34px;
  border-radius: var(--ff-radius-md);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ff-btn:hover  { background: var(--ff-accent-gold-bright); box-shadow: var(--ff-glow-gold); }
.ff-btn:disabled { background: var(--ff-surface-raised); color: var(--ff-text-muted); cursor: not-allowed; box-shadow: none; }

a.ff-btn,
a.ff-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.ff-btn-primary,
.ff-btn-secondary {
  font-family: var(--ff-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  border: none;
  padding: 16px 34px;
  border-radius: var(--ff-radius-md);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  width: 100%;
  text-align: center;
}

.ff-btn-primary {
  color: var(--ff-text-on-accent);
  background: var(--ff-accent-gold);
}

.ff-btn-primary:hover {
  background: var(--ff-accent-gold-bright);
  box-shadow: var(--ff-glow-gold);
}

.ff-btn-secondary {
  color: var(--ff-text-primary);
  background: transparent;
  border: 1.5px solid rgba(232, 184, 74, 0.5);
}

.ff-btn-secondary:hover {
  border-color: var(--ff-accent-gold);
  background: rgba(232, 184, 74, 0.08);
}

/* Form input */
.ff-input {
  width: 100%;
  background: var(--ff-bg-section-alt);
  border: 1.5px solid var(--ff-border-subtle);
  border-radius: var(--ff-radius-sm);
  padding: 14px 16px;
  font-family: var(--ff-font-ui);
  font-size: 15px;
  color: var(--ff-text-primary);
  box-sizing: border-box;
}
.ff-input::placeholder { color: var(--ff-text-muted); }
.ff-input:focus {
  outline: none;
  border-color: var(--ff-border-emphasis);
  box-shadow: 0 0 0 3px rgba(232, 184, 74, 0.18);
}
.ff-input[aria-invalid="true"] { border-color: var(--ff-negative); }

/* Selected bundle card — apply to .os-card when chosen */
.ff-card-selected {
  border: 1.5px solid var(--ff-border-emphasis) !important;
  box-shadow: var(--ff-glow-gold-soft);
}