/* ============================================
   TOKENS — Single source of truth for design.
   See ARCHITECTURE_PRINCIPLES.md "Design System Compliance" + "No Magic Numbers".
   ============================================ */

/* --------------------------------------------
   1. Theme-agnostic primitives
   These never change between themes. They define the alphabet.
   -------------------------------------------- */
:root {
  /* Type scale */
  --text-xs:   0.72rem;
  --text-sm:   0.88rem;
  --text-base: 1.1rem;
  --text-lg:   1.3rem;
  --text-xl:   1.5rem;
  --text-2xl:  2.9rem;
  --text-3xl:  3.8rem;
  --text-4xl:  5rem;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --max-width:   1120px;
  --column-gap:  3rem;

  /* Brand color primitives — composition material, not direct UI references */
  --indigo-900: #0f0f2a;
  --indigo-800: #1a1a3e;
  --indigo-700: #252552;
  --cream:      #f5f0e8;
  --cream-soft: #faf8f4;
  --cream-warm: #f0ebe1;

  --amber-base: #c9a94e;
  --amber-lift: #d8b863;
  --green-base: #34C759;
  --red-base:   #FF453A;
  --red-lift:   #FF6259;
  --blue-base:  #2252F4;
  --blue-lift:  #6088ff;
}

/* --------------------------------------------
   2. Light theme — semantic tokens
   These are what components reference.
   -------------------------------------------- */
:root,
:root[data-theme="light"] {
  /* Surfaces */
  --bg:           var(--cream-soft);
  --bg-elevated: var(--cream);
  --bg-surface:  var(--indigo-900);     /* dark cards on a light page */

  /* Text */
  --text:           #111111;
  --text-secondary: rgba(17, 17, 17, 0.78);
  --text-muted:     rgba(17, 17, 17, 0.48);

  /* Text on dark surfaces (pricing card, footer) */
  --text-on-dark:           var(--cream);
  --text-on-dark-secondary: rgba(245, 240, 232, 0.65);
  --text-on-dark-muted:     rgba(245, 240, 232, 0.40);

  /* Lines */
  --border:        rgba(17, 17, 17, 0.10);
  --border-strong: rgba(17, 17, 17, 0.18);
  --border-on-dark: rgba(245, 240, 232, 0.10);

  /* Brand accents (intent-named) */
  --accent: var(--red-base);
  --amber:  var(--amber-base);
  --green:  var(--green-base);

  /* Gradient washes — atmospheric overlays behind sections */
  --wash-amber-strong: rgba(201, 169, 78, 0.20);
  --wash-amber-medium: rgba(201, 169, 78, 0.18);
  --wash-amber-soft:   rgba(201, 169, 78, 0.06);
  --wash-amber-faint:  rgba(201, 169, 78, 0.03);
  --wash-blue-strong:  rgba(90, 110, 200, 0.22);
  --wash-blue-medium:  rgba(90, 130, 200, 0.20);
  --wash-blue-soft:    rgba(90, 130, 200, 0.05);

  /* Animated wave stroke (hero) */
  --wave-stroke: var(--blue-base);
  --wave-stroke-opacity: 0.7;

  /* Shadows */
  --shadow-sm:        0 2px 16px rgba(15, 15, 42, 0.06);
  --shadow-md:        0 4px 16px rgba(17, 17, 17, 0.15);
  --shadow-lg:        0 8px 24px rgba(15, 15, 42, 0.20);
  --shadow-card:      0 8px 40px rgba(15, 15, 42, 0.25), 0 2px 6px rgba(15, 15, 42, 0.10);
  --shadow-card-deep: 0 24px 80px rgba(15, 15, 42, 0.30), 0 8px 24px rgba(15, 15, 42, 0.15);
  --shadow-fan:       0 16px 48px rgba(15, 15, 42, 0.25), 0 4px 12px rgba(15, 15, 42, 0.15);
  --shadow-fan-mid:   0 20px 60px rgba(15, 15, 42, 0.40), 0 8px 24px rgba(15, 15, 42, 0.20), 0 0 80px rgba(201, 169, 78, 0.08);

  /* Focus ring colors */
  --focus-ring:         var(--accent);
  --focus-ring-on-dark: var(--cream);

  color-scheme: light;
}

/* --------------------------------------------
   3. Dark theme — semantic tokens
   "Indigo night." Cream stays as content; the room dims.
   -------------------------------------------- */
:root[data-theme="dark"] {
  --bg:           #0c0c24;          /* slightly deeper than indigo-900 so elevated surfaces sit above */
  --bg-elevated:  #15153a;          /* indigo-800-ish, used for cards on dark page */
  --bg-surface:   #1d1d4a;          /* indigo-700-ish, third elevation */

  --text:           var(--cream-warm);     /* cooler off-white, less yellow on dark */
  --text-secondary: rgba(240, 235, 225, 0.78);
  --text-muted:     rgba(240, 235, 225, 0.48);

  --text-on-dark:           var(--cream-warm);
  --text-on-dark-secondary: rgba(240, 235, 225, 0.72);
  --text-on-dark-muted:     rgba(240, 235, 225, 0.45);

  --border:        rgba(240, 235, 225, 0.10);
  --border-strong: rgba(240, 235, 225, 0.18);
  --border-on-dark: rgba(240, 235, 225, 0.10);

  --accent: var(--red-lift);
  --amber:  var(--amber-lift);
  --green:  var(--green-base);

  --wash-amber-strong: rgba(216, 184, 99, 0.12);
  --wash-amber-medium: rgba(216, 184, 99, 0.10);
  --wash-amber-soft:   rgba(216, 184, 99, 0.04);
  --wash-amber-faint:  rgba(216, 184, 99, 0.02);
  --wash-blue-strong:  rgba(120, 140, 220, 0.16);
  --wash-blue-medium:  rgba(120, 140, 220, 0.14);
  --wash-blue-soft:    rgba(120, 140, 220, 0.04);

  --wave-stroke: var(--blue-lift);
  --wave-stroke-opacity: 0.55;

  --shadow-sm:        0 2px 16px rgba(0, 0, 0, 0.40);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-card:      0 8px 48px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-card-deep: 0 24px 80px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-fan:       0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-fan-mid:   0 20px 60px rgba(0, 0, 0, 0.65), 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 80px rgba(216, 184, 99, 0.10);

  --focus-ring:         var(--accent);
  --focus-ring-on-dark: var(--cream-warm);

  color-scheme: dark;
}

/* Auto-follow system preference when no explicit choice exists */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0c0c24;
    --bg-elevated:  #15153a;
    --bg-surface:   #1d1d4a;

    --text:           var(--cream-warm);
    --text-secondary: rgba(240, 235, 225, 0.78);
    --text-muted:     rgba(240, 235, 225, 0.48);

    --text-on-dark:           var(--cream-warm);
    --text-on-dark-secondary: rgba(240, 235, 225, 0.72);
    --text-on-dark-muted:     rgba(240, 235, 225, 0.45);

    --border:        rgba(240, 235, 225, 0.10);
    --border-strong: rgba(240, 235, 225, 0.18);
    --border-on-dark: rgba(240, 235, 225, 0.10);

    --accent: var(--red-lift);
    --amber:  var(--amber-lift);

    --wash-amber-strong: rgba(216, 184, 99, 0.12);
    --wash-amber-medium: rgba(216, 184, 99, 0.10);
    --wash-amber-soft:   rgba(216, 184, 99, 0.04);
    --wash-amber-faint:  rgba(216, 184, 99, 0.02);
    --wash-blue-strong:  rgba(120, 140, 220, 0.16);
    --wash-blue-medium:  rgba(120, 140, 220, 0.14);
    --wash-blue-soft:    rgba(120, 140, 220, 0.04);

    --wave-stroke: var(--blue-lift);
    --wave-stroke-opacity: 0.55;

    --shadow-sm:        0 2px 16px rgba(0, 0, 0, 0.40);
    --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.50);
    --shadow-card:      0 8px 48px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-card-deep: 0 24px 80px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-fan:       0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-fan-mid:   0 20px 60px rgba(0, 0, 0, 0.65), 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 80px rgba(216, 184, 99, 0.10);

    --focus-ring-on-dark: var(--cream-warm);

    color-scheme: dark;
  }
}

/* --------------------------------------------
   4. Reset + base
   -------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  background-color: var(--bg);
}

body {
  font-family: 'Merriweather Sans', -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* --------------------------------------------
   5. Typography utilities
   These are the primitives templates compose with.
   "No Duplicated Logic" — define once, reuse everywhere.
   -------------------------------------------- */
.heading {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

/* Heading scale — bind tag to size explicitly so hierarchy is visual, not just semantic */
.heading-1 { font-size: var(--text-4xl); }   /* hero only */
.heading-2 { font-size: var(--text-3xl); }   /* major section heads (How it works, Pricing) */
.heading-3 { font-size: var(--text-2xl); }   /* feature heads */
.heading-4 { font-size: var(--text-xl); }    /* card / inline heads */

/* The "primary body voice" — used by hero sub, section bodies, feature bodies. */
.body-large {
  font-size: var(--text-lg);
  font-weight: 420;
  line-height: 1.7;
  color: var(--text-secondary);
}

.section-label {
  display: block;
  font-family: 'Merriweather Sans', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* --------------------------------------------
   6. Layout utilities
   -------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 max(var(--space-md), env(safe-area-inset-right)) 0 max(var(--space-md), env(safe-area-inset-left));
}

.split { display: grid; gap: var(--column-gap); align-items: center; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.split--7-5 { grid-template-columns: 7fr 5fr; }

/* --------------------------------------------
   7. Focus — keyboard accessibility (FINDING-001)
   Single global rule. Variants for dark surfaces below.
   -------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

/* On dark surfaces the red focus ring works, but the cream variant has more contrast. */
.footer :focus-visible,
.pricing-card :focus-visible,
.fan-screen :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

/* --------------------------------------------
   8. Reduced motion — global guard (FINDING-002)
   Per-component overrides may further pause specific animations.
   -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.001ms !important;
    scroll-behavior:           auto !important;
  }
}

/* --------------------------------------------
   9. Responsive base
   -------------------------------------------- */
@media (max-width: 768px) {
  html { font-size: 17px; }
}