/* ============================================================
   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 (dark — checkout/upsell/receipt default) ---- */
  --ff-bg-base:          #1C1B32;  /* page background — dark navy */
  --ff-bg-section-alt:   #2A211D;  /* alternating sections — dark brown */
  --ff-surface:          #23213F;  /* cards, inputs */
  --ff-surface-raised:   #2C2A4D;  /* elevated panels, modals */

  /* ---- Colour · borders ---- */
  --ff-border-subtle:    rgba(245, 239, 228, 0.12);  /* default card/input borders */
  --ff-border-emphasis:  #C9912E;                     /* selected / focus borders */

  /* ---- Colour · accents ---- */
  --ff-accent-gold:        #C9912E;  /* CTAs, price, logo, links */
  --ff-accent-gold-bright: #E7B85A;  /* hover / glow state */
  --ff-accent-indigo:      #30274D;  /* purple accent — buttons, badges */
  --ff-accent-raspberry:   #B23A6E;  /* flavour tag, tertiary */

  /* ---- Colour · text ---- */
  --ff-text-primary:    #F5EFE4;  /* headlines */
  --ff-text-body:       #D9CCB8;  /* body copy */
  --ff-text-muted:      #9A9388;  /* captions, secondary */
  --ff-text-on-accent:  #17161C;  /* 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(201, 145, 46, 0.45);   /* CTA hover */
  --ff-glow-gold-soft: 0 8px 30px rgba(201, 145, 46, 0.22);  /* selected card */

  /* ---- Colour · section accents (theme-independent) ---- */
  --ff-guarantee-bg:   #1C1B32;  /* dark navy band — guarantee section on light landing pages */
  --ff-gradient-cream: linear-gradient(135deg, #FBF8F2 0%, #F5EFE4 50%, #EDE2D0 100%);

  /* ---- 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(201, 145, 46, 0.5);
}

.ff-btn-secondary:hover {
  border-color: var(--ff-accent-gold);
  background: rgba(201, 145, 46, 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(201, 145, 46, 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);
}

/* ============================================================
   Light cream theme — landing / presell pages only.
   Scoped to body.ff-landing-page (see base-landing.html <body> class).
   Checkout/upsell/downsell/receipt (base.html, no class) keep the
   dark navy defaults above by design — "dark checkout" per brand spec.
   ============================================================ */
body.ff-landing-page {
  --ff-bg-base:        #F5EFE4;  /* cream */
  --ff-bg-section-alt: #EDE2D0;  /* cream warm */
  --ff-surface:        #FBF8F2;  /* cream light — cards */
  --ff-surface-raised: #FFFFFF;
  --ff-border-subtle:  #D9CCB8;  /* solid tan border on light bg */
  --ff-text-primary:   #1C1B32;  /* headline */
  --ff-text-body:      #5E5A55;
  --ff-text-muted:     #8A8378;
  background: var(--ff-gradient-cream);

  /* landing/tokens.css aliases these to var(--ff-*) only once, at :root —
     that binding freezes to the dark-theme default and does not re-resolve
     when --ff-* is redefined deeper in the tree, so every Tailwind
     arbitrary-value class using the bridge vars (text-[var(--text-primary)],
     bg-[var(--brand-secondary)], etc.) needs a direct light-theme value here. */
  --brand-primary:   #C9912E;
  --brand-secondary: #EDE2D0;
  --brand-tint:      #EDE2D0;
  --surface-bg:      #F5EFE4;
  --surface-card:    #FBF8F2;
  --surface-alt:     #EDE2D0;
  --text-primary:    #1C1B32;
  --text-secondary:  #5E5A55;
  --border-default:  #D9CCB8;
}