/*
  Design tokens — single source of truth.
  Every color, font, spacing, radius, shadow and motion value used
  anywhere on the site is defined here ONCE and consumed via var().
  Never hardcode a hex/px value in component or section CSS.
*/

:root {
  /* ---------- Color: brand ---------- */
  --color-bg: #FAFAF7;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F2EC;
  --color-ink: #0E1B1A;
  --color-ink-muted: #5C6866;
  --color-ink-soft: #889390;

  --color-primary: #0E6E5D;
  --color-primary-dark: #073C32;
  --color-primary-light: #129479;
  --color-on-primary: #FFFFFF;

  --color-accent: #B68A4E;
  --color-accent-light: #D9AE6B;
  --color-on-accent: #1C1305;

  --color-mint-tint: #E6F3EF;
  --color-border: #E4E0D6;
  --color-border-strong: #D2CCBC;

  --color-emergency: #D33B2C;
  --color-emergency-dark: #A82B1F;
  --color-on-emergency: #FFFFFF;

  --color-success: #1E8E5A;
  --color-error: #D33B2C;

  /* ---------- Color: glass / overlay ---------- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.5);
  --scrim: rgba(8, 21, 19, 0.6);

  /* ---------- Typography ---------- */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.875rem, 2.5vw + 1rem, 2.5rem);
  --text-4xl: clamp(2.25rem, 3.5vw + 1rem, 3.25rem);
  --text-5xl: clamp(2.75rem, 5vw + 1rem, 4.25rem);
  --text-hero: clamp(2.75rem, 6vw + 1rem, 5.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* ---------- Spacing (4px base unit) ---------- */
  --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;

  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);

  /* Header height — explicit tokens rather than deriving height from
     padding + content, so the header is guaranteed to hit the target
     regardless of font metrics. --space-20 already equals 80px. */
  --nav-height: var(--space-20);
  --nav-height-mobile: 4.5rem;

  /* ---------- Radius ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(8, 30, 26, 0.04);
  --shadow-sm: 0 4px 12px rgba(8, 30, 26, 0.06);
  --shadow-md: 0 16px 40px rgba(8, 30, 26, 0.08);
  --shadow-lg: 0 24px 64px rgba(8, 30, 26, 0.12);
  --shadow-glow-primary: 0 8px 24px rgba(14, 110, 93, 0.28);
  --shadow-glow-emergency: 0 8px 24px rgba(211, 59, 44, 0.32);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---------- Z-index scale ---------- */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fab: 30;
  --z-nav: 40;
  --z-overlay: 100;
  --z-modal: 110;
  --z-toast: 120;
  --z-preloader: 200;
}

/* ---------- Dark mode ---------- */
[data-theme='dark'] {
  --color-bg: #081513;
  --color-surface: #143530;
  --color-surface-alt: #0B1E1A;
  --color-ink: #F3F1EA;
  --color-ink-muted: #A9B6B3;
  --color-ink-soft: #93A19D;

  --color-primary: #22B79A;
  --color-primary-dark: #0E6E5D;
  --color-primary-light: #4FD3B6;
  --color-on-primary: #052420;

  --color-accent: #D9AE6B;
  --color-accent-light: #EBC68C;
  --color-on-accent: #1C1305;

  --color-mint-tint: #1C4A42;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-emergency: #FF6B57;
  --color-emergency-dark: #D33B2C;
  --color-on-emergency: #1C0805;

  --glass-bg: rgba(15, 35, 32, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --scrim: rgba(0, 0, 0, 0.7);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.4);
}

/*
  Actual theme switching is driven by data-theme="dark|light" on <html>,
  set synchronously by an inline script in <head> (reads localStorage,
  falls back to prefers-color-scheme) to avoid a flash of wrong theme.
  See partials/head-meta.php.
*/
:root {
  color-scheme: light;
}
[data-theme='dark'] {
  color-scheme: dark;
}