/* shadcn/ui theme variables — bridged to Hatchi palette */
:root {
  /* shadcn primitives expect HSL triplets (no wrapper) */
  --background: 42 22% 97%;        /* ~ off-white */
  --foreground: 215 63% 7%;        /* ~ dark navy */
  --card: 0 0% 100%;
  --card-foreground: 215 63% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 215 63% 7%;
  --primary: 170 60% 58%;          /* ~ turquoise */
  --primary-foreground: 215 63% 7%;
  --secondary: 215 40% 14%;        /* ~ dark-card */
  --secondary-foreground: 42 22% 97%;
  --muted: 210 20% 94%;
  --muted-foreground: 215 15% 40%;
  --accent: 170 60% 58%;
  --accent-foreground: 215 63% 7%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 20% 88%;
  --input: 215 20% 88%;
  --ring: 170 60% 58%;
  --radius: 0.75rem;

  /* ── Design Tokens (Brilliant Digital-inspired) ── */
  /* Colors */
  --dark: #050f1e;
  --dark-card: #0a1730;
  --light: #f4f3ef;
  --off-white: #f9f8f5;
  --white: #ffffff;
  --turquoise: #4dd9c0;
  --turquoise-deep: #2bc4ad;
  --turquoise-light: #7ae8d6;
  --mint: #a0f0d8;
  --green: #29d55a;
  --text-dark: #050f1e;
  --text-sec-dark: #636378;
  --text-light: #e8e8f0;
  --text-sec-light: rgba(232,232,240,0.55);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--turquoise-deep) 0%, var(--turquoise-light) 100%);
  --gradient-brand-h: linear-gradient(90deg, var(--turquoise-deep) 0%, var(--turquoise-light) 100%);

  /* Typography */
  --font-display: 'Funnel Display', 'Hatchi', 'DM Sans', sans-serif;
  --font-sans: 'DM Sans', 'Hatchi', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Spacing */
  --spacing-section-y: clamp(5rem, 10vh, 9rem);
  --spacing-section-y-sm: clamp(3rem, 6vh, 5rem);
  --spacing-container-x: clamp(1.5rem, 5vw, 4rem);

  /* Radii */
  --radius-card: 20px;
  --radius-pill: 30px;

  /* Shadows */
  --shadow-subtle: 0 1px 6px rgba(0,0,0,0.03);
  --shadow-card: 0 4px 20px rgba(5,15,30,0.08);
  --shadow-elevated: 0 20px 60px rgba(5,15,30,0.18);
  --shadow-float: 0 8px 30px rgba(0,0,0,0.08);

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Section-level theming vars ──
     Every content module in the "bg_theme" toggle set consumes these
     instead of hardcoding --off-white / --text-dark, so a single
     `.section--theme-dark` class on the section root flips the palette. */
  --module-bg: var(--off-white);
  --module-surface: var(--white);                /* inner cards / panels */
  --module-fg: var(--text-dark);
  --module-fg-sec: var(--text-sec-dark);
  --module-border: rgba(5, 15, 30, 0.08);
  --module-icon-bg: rgba(5, 15, 30, 0.04);
}

/* Dark variant: applied to a section's root when editor picks "Dark".
   Mirrors the tokens used by the intrinsically-dark modules (Approach,
   CtaSection, Stats, Process, Schedule) for visual coherence. */
.section--theme-dark {
  --module-bg: var(--dark);
  --module-surface: var(--dark-card);
  --module-fg: var(--text-light);
  /* The token --text-sec-light is 55% alpha, which the intrinsically-dark
     modules use for deep-navy contrast. Module toggles produce more varied
     foregrounds (imagery, gradients), so we override with a higher-opacity
     neutral here to keep intro/body copy legible. */
  --module-fg-sec: rgba(232, 232, 240, 0.78);
  --module-border: rgba(255, 255, 255, 0.1);
  --module-icon-bg: rgba(255, 255, 255, 0.06);
}

.dark {
  --background: 215 63% 7%;
  --foreground: 42 22% 97%;
  --card: 215 40% 10%;
  --card-foreground: 42 22% 97%;
  --popover: 215 40% 10%;
  --popover-foreground: 42 22% 97%;
  --primary: 170 60% 58%;
  --primary-foreground: 215 63% 7%;
  --secondary: 215 30% 20%;
  --secondary-foreground: 42 22% 97%;
  --muted: 215 30% 18%;
  --muted-foreground: 215 15% 70%;
  --accent: 170 60% 58%;
  --accent-foreground: 215 63% 7%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 30% 22%;
  --input: 215 30% 22%;
  --ring: 170 60% 58%;
}