/* ==========================================================================
   QAVA — Design tokens
   Single source of truth for color, type, space, motion and elevation.
   Components must reference these variables, never raw values.
   ========================================================================== */

:root {
  /* ---- Brand primitives (fixed, not theme-dependent) ---- */
  --c-forest-900: #0d2721;
  --c-forest-800: #14332c;
  --c-forest-700: #1e4a3f;
  --c-copper-600: #9a5324;
  --c-copper-500: #b5652e;
  --c-copper-400: #e08a4a;
  --c-copper-100: #e7c7a8;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --text-2xs: 0.72rem;
  --text-xs: 0.8rem;
  --text-sm: 0.88rem;
  --text-base: 0.98rem;
  --text-md: 1.08rem;
  --text-lg: 1.3rem;
  --text-xl: clamp(1.5rem, 2.6vw, 2rem);
  --text-2xl: clamp(1.9rem, 4vw, 3rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.14em;

  /* ---- Space scale ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --section-y: clamp(3.25rem, 7vw, 4.5rem);
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --wrap-max: 1120px;
  --wrap-wide: 1360px;

  /* ---- Shape ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 720ms;
  --dur-roll: 1500ms;

  /* ---- Layout ---- */
  --header-h: 68px;
  --z-header: 50;
  --z-lightbox: 100;

  /* ---- Cover photo band ----
     Height is deliberately short: a 3.3:1 band crops a 1.83:1 photo hard.
     --band-focus-y anchors the crop near the top of the frame so heads are
     not cut off; raise it to re-centre. --band-overshoot is the safety
     margin the parallax drifts inside, and must exceed the drift. */
  --photo-band-h: clamp(260px, 40vw, 383px);
  --band-focus-y: 22%;
  --band-overshoot: 1.12;

  /* ---- Semantic: light theme (default) ---- */
  --bg: #eceae2;
  --bg-panel: #ffffff;
  --bg-sunken: #e3e0d6;
  --ink: #16211d;
  --ink-soft: #4d564f;
  --ink-faint: #79817a;
  --line: #c9c6ba;
  --line-strong: #a8a496;
  --brand: #14332c;
  --brand-2: #1e4a3f;
  --accent: #b5652e;
  --accent-hover: #9a5324;
  --accent-on: #ffffff;
  /* Darker copper reserved for filled buttons: white on --accent only
     reaches 4.32:1, which fails AA for button text. */
  --accent-solid: #a35a24;
  --accent-solid-hover: #8f4c1d;
  --accent-contrast: #e7c7a8;
  --overlay: rgba(13, 39, 33, 0.72);

  --shadow-sm: 0 1px 2px rgba(22, 33, 29, 0.06);
  --shadow-md: 0 6px 20px -8px rgba(22, 33, 29, 0.18);
  --shadow-lg: 0 18px 44px -16px rgba(22, 33, 29, 0.28);
  --scrim: rgba(0, 0, 0, 0.55);
}

/* ---- Semantic: dark theme (explicit user choice) ---- */
:root[data-theme='dark'] {
  --bg: #121a17;
  --bg-panel: #182420;
  --bg-sunken: #0d1412;
  --ink: #eae7de;
  --ink-soft: #a8b0a9;
  --ink-faint: #7e8880;
  --line: #33403a;
  --line-strong: #46564e;
  --brand: #e7e3d8;
  --brand-2: #cfe3d9;
  --accent: #e08a4a;
  --accent-hover: #ec9c60;
  --accent-on: #16211d;
  --accent-solid: #e08a4a;
  --accent-solid-hover: #ec9c60;
  --accent-contrast: #8a4a1c;
  --overlay: rgba(6, 14, 12, 0.78);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 18px 44px -16px rgba(0, 0, 0, 0.7);
  --scrim: rgba(0, 0, 0, 0.78);
}

/* ---- Semantic: dark theme (OS preference, unless overridden) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #121a17;
    --bg-panel: #182420;
    --bg-sunken: #0d1412;
    --ink: #eae7de;
    --ink-soft: #a8b0a9;
    --ink-faint: #7e8880;
    --line: #33403a;
    --line-strong: #46564e;
    --brand: #e7e3d8;
    --brand-2: #cfe3d9;
    --accent: #e08a4a;
    --accent-hover: #ec9c60;
    --accent-on: #16211d;
    --accent-solid: #e08a4a;
    --accent-solid-hover: #ec9c60;
    /* .trust inverts to a light panel in dark mode, so the highlight colour
       must be a deep copper to stay legible on cream. */
    --accent-contrast: #8a4a1c;
    --overlay: rgba(6, 14, 12, 0.78);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 18px 44px -16px rgba(0, 0, 0, 0.7);
    --scrim: rgba(0, 0, 0, 0.78);
  }
}