/*
  SEED: 5837412

  A — Layout:      digit 2 → Horizontal scroll hero — first section scrolls horizontally, rest vertical
  B — Color:       digit 1 → Off-white (#f5f0e8) warm base, deep burgundy primary, gold accent
  C — Typography:  digit 4 → Display: Cormorant Garamond (high-contrast serif) + Body: IBM Plex Sans
  D — Visual lang: digit 7 → Hard geometric cutouts: sections use clip-path polygon borders
  E — Navigation:  digit 3 → Bottom navigation — fixed bottom bar (mobile-app style, works desktop too)
  F — Tone:        digit 8 → Luxury restrained — evocative but sparse, never explains, implies

  These choices were determined by the seed and must not be changed
  for reasons of "appropriateness" or "better fit for the content".
  Tension between content and form is intentional.
*/

/*
  BRAND ARCHETYPE:    Luminary
  LAYOUT PARADIGM:    Horizontal scroll hero + single-column editorial stacked below; eye travels cinematic left-right then descends
  SECTION ORDER:      Advertorial bar → Hero (h-scroll) → Problem → Solution intro → 5 Reasons → Takeaways → FAQ → CTA → Footer → Bottom Nav
  DISPLAY FONT:       Cormorant Garamond — https://fonts.google.com/specimen/Cormorant+Garamond
  BODY FONT:          IBM Plex Sans — https://fonts.google.com/specimen/IBM+Plex+Sans
  PRIMARY COLOR:      #7B1D35 — deep burgundy; committed, considered, the opposite of generic purple
  SHAPE LANGUAGE:     Sharp — clip-path polygon cuts, no border-radius on structural elements, hard geometry
  SIGNATURE MOMENT:   Horizontal scroll hero with 3 cinematic panels + giant background numerals on reasons
  TONE OF VOICE:      Evocative, restrained, implies
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ─── Brand Palette ───────────────────────────────────────────── */
  --brand-primary:   #7B1D35;   /* deep burgundy — committed, not safe */
  --brand-secondary: #C4922A;   /* antique gold — unexpected, not a tint of primary */
  --brand-accent:    #C4922A;   /* functional: CTAs, active states, highlights */
  --brand-accent-hover: #E0A830; /* btn-inverse hover — brighter gold */

  /* ─── Surfaces ────────────────────────────────────────────────── */
  --surface-base:    #F5F0E8;   /* warm off-white — main page background */
  --surface-raised:  #EBE5D5;   /* cards, panels — visibly distinct */
  --surface-inverse: #7B1D35;   /* brand-primary-background sections */
  --surface-dark:    #1C0E14;   /* footer, deepest contrast */

  /* ─── Text ────────────────────────────────────────────────────── */
  --text-primary:    #1C0E14;   /* near-black with warm undertone */
  --text-secondary:  #7A6872;   /* muted warm grey — captions, meta */
  --text-inverse:    #F5F0E8;   /* on dark / brand-primary backgrounds */
  --text-gold:       #C4922A;   /* gold accent text */

  /* ─── Borders ─────────────────────────────────────────────────── */
  --border-subtle:   rgba(28, 14, 20, 0.12);
  --border-strong:   rgba(28, 14, 20, 0.35);
  --border-gold:     rgba(196, 146, 42, 0.4);

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale — no fixed breakpoints for type */
  --text-hero:  clamp(3.5rem, 10vw,  9rem);
  --text-h1:    clamp(2.5rem, 6vw,   5.5rem);
  --text-h2:    clamp(1.75rem, 3.5vw, 3rem);
  --text-h3:    clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body:  clamp(1rem, 1.4vw,   1.125rem);
  --text-sm:    clamp(0.75rem, 1vw,  0.875rem);
  --text-xs:    0.6875rem;

  /* ─── Spacing scale (8px base) ────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ─── Layout ──────────────────────────────────────────────────── */
  --max-content: 1200px;
  --editorial-col: 620px;      /* ultra-narrow editorial column */
  --bottom-nav-h: 60px;

  /* ─── Clip-path presets ───────────────────────────────────────── */
  --clip-slant-down:  polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
  --clip-slant-up:    polygon(0 48px, 100% 0, 100% 100%, 0 100%);
  --clip-slant-both:  polygon(0 48px, 100% 0, 100% calc(100% - 48px), 0 100%);

  /* ─── Motion ──────────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:  cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast: 150ms;
  --duration-mid:  250ms;
  --duration-slow: 500ms;

  /* ─── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(28, 14, 20, 0.08);
  --shadow-md: 0 8px 24px rgba(28, 14, 20, 0.12);
  --shadow-lg: 0 20px 48px rgba(28, 14, 20, 0.18);
}