:root {
  color-scheme: light dark;

  /* Colors */
  --color-primary: #3D8D7A;
  --color-primary-dark: #2F6F5F;
  --color-primary-hover: var(--color-primary-dark);
  --color-on-primary: #FCFCFC;
  /* Slightly deeper than --color-primary so on-primary text clears 4.5:1 (WCAG AA);
     --color-primary itself stays untouched since it's also used as an accent/icon color. */
  --color-primary-btn: #367C6B;
  --color-secondary: #B3D8A8;
  --color-complementary: #A3D1C6;
  --color-bg-light: #FCFCFC;
  --color-bg-warm: #FBFFE4;
  --color-bg-dark: #111827;
  --color-surface-dark: #1B2433;
  --color-elevated-dark: #253247;
  --color-text: #1F2A24;
  --color-text-muted: #5B6B63;
  --color-text-on-dark: #F5F7F5;
  --color-border: rgba(163, 209, 198, 0.35);
  /* Muted terracotta, not a saturated alarm red — reads as "please check this"
     rather than "something broke", consistent with the calm/premium tone. */
  --color-danger: #C0563F;

  /* Surface tokens (theme-aware card/chrome backgrounds) */
  --color-surface: #ffffff;
  --color-surface-translucent: rgba(255, 255, 255, 0.92);
  --color-nav-bg: rgba(252, 252, 252, 0.7);
  --color-nav-bg-scrolled: rgba(252, 252, 252, 0.9);
  --color-row-hover: rgba(255, 255, 255, 0.55);
  --color-panel-bg: var(--color-bg-light);

  /* Typography */
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Fluid type scale */
  --text-xs: clamp(0.78rem, 0.74rem + 0.15vw, 0.85rem);
  --text-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --text-md: clamp(1rem, 0.97rem + 0.2vw, 1.1rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --text-xl: clamp(1.6rem, 1.4rem + 0.9vw, 2rem);
  --text-hero: clamp(2.75rem, 2.1rem + 3vw, 4.5rem);

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

  /* Layout */
  --max-width: 1200px;
  --nav-height: 4.5rem;
  --radius-sm: 0.6rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.75rem;
  --radius-xl: 2.5rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(31, 42, 36, 0.06);
  --shadow-md: 0 8px 24px rgba(31, 42, 36, 0.08);
  --shadow-lg: 0 24px 60px rgba(31, 42, 36, 0.12);
  --shadow-card: 0 12px 32px rgba(61, 141, 122, 0.14);

  /* Z-index */
  --z-navbar: 100;
  --z-navbar-toggle: 110;
  --z-mockup-card: 5;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(61, 141, 122, 0.35);

  /* Transitions / easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.3s var(--ease-out);
  --transition-slow: 0.5s var(--ease-out);
}

/* ---------- Dark theme (automatic, follows system preference) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Re-map the two alternating section tones + card tier onto the dark scale.
       Every section background in the site is built from these two variables,
       so the whole rhythm/gradient system re-themes without further edits. */
    --color-bg-light: var(--color-bg-dark);
    --color-bg-warm: var(--color-surface-dark);
    --color-surface: var(--color-elevated-dark);
    --color-surface-translucent: rgba(37, 50, 71, 0.82);
    --color-nav-bg: rgba(17, 24, 39, 0.72);
    --color-nav-bg-scrolled: rgba(17, 24, 39, 0.92);
    --color-row-hover: rgba(255, 255, 255, 0.05);
    --color-panel-bg: var(--color-surface-dark);

    --color-text: var(--color-text-on-dark);
    --color-text-muted: #A6B3C2;
    --color-border: rgba(163, 209, 198, 0.16);
    --color-primary-dark: #66BFA6;
    --color-primary-hover: #2A6857;
    --color-danger: #E0785D;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 10px 30px rgba(61, 141, 122, 0.32);

    --focus-ring: 0 0 0 3px rgba(61, 141, 122, 0.5);
  }
}