/* Design tokens.
 *
 * Colour is defined once per theme in OKLCH. light-dark() picks the value for
 * the active colour scheme; the theme toggle only flips color-scheme on :root,
 * so every token below follows automatically.
 *
 * Contrast (checked in Phase 7): body text >= 7:1, muted text >= 4.5:1,
 * brand text on surfaces >= 4.5:1, borders and focus ring >= 3:1.
 */
:root {
  color-scheme: light dark;

  /* ---- Brand ------------------------------------------------------- */
  --brand-hue: 163;
  --brand-500: oklch(56% 0.13 var(--brand-hue)); /* #00855b, the original green */
  --brand-600: oklch(48% 0.12 var(--brand-hue));
  --brand-700: oklch(40% 0.10 var(--brand-hue));
  --brand-300: oklch(78% 0.13 var(--brand-hue));
  --brand-200: oklch(88% 0.08 var(--brand-hue));
  --brand-100: oklch(95% 0.035 var(--brand-hue));

  --ink-hue: 190;
  --amber: oklch(86% 0.13 85);
  --amber-deep: oklch(62% 0.14 70);
  --lavender: oklch(90% 0.05 290);
  --coral: oklch(68% 0.16 30);

  /* ---- Semantic colours ------------------------------------------- */
  --bg: light-dark(oklch(98.5% 0.004 var(--brand-hue)), oklch(17% 0.012 var(--ink-hue)));
  --bg-raised: light-dark(oklch(100% 0 0), oklch(22% 0.014 var(--ink-hue)));
  --bg-sunken: light-dark(oklch(96% 0.008 var(--brand-hue)), oklch(14% 0.01 var(--ink-hue)));
  --bg-tint: light-dark(var(--brand-100), oklch(24% 0.03 var(--brand-hue)));
  --bg-inverse: light-dark(oklch(24% 0.03 var(--ink-hue)), oklch(93% 0.01 var(--brand-hue)));

  --text: light-dark(oklch(24% 0.02 var(--ink-hue)), oklch(93% 0.01 var(--brand-hue)));
  --text-muted: light-dark(oklch(44% 0.02 var(--ink-hue)), oklch(76% 0.015 var(--brand-hue)));
  --text-inverse: light-dark(oklch(97% 0.005 var(--brand-hue)), oklch(20% 0.02 var(--ink-hue)));

  --accent: light-dark(var(--brand-600), var(--brand-300));
  --accent-strong: light-dark(var(--brand-700), oklch(84% 0.12 var(--brand-hue)));
  --accent-soft: light-dark(var(--brand-200), oklch(30% 0.05 var(--brand-hue)));
  --on-accent: light-dark(oklch(99% 0 0), oklch(15% 0.03 var(--brand-hue)));

  --link: light-dark(var(--brand-700), var(--brand-300));
  --link-hover: light-dark(oklch(30% 0.09 var(--brand-hue)), oklch(90% 0.09 var(--brand-hue)));

  --border: light-dark(oklch(84% 0.012 var(--ink-hue)), oklch(38% 0.018 var(--ink-hue)));
  --border-strong: light-dark(oklch(60% 0.02 var(--ink-hue)), oklch(62% 0.02 var(--ink-hue)));

  --focus: light-dark(oklch(45% 0.19 290), oklch(88% 0.16 95));
  --focus-halo: light-dark(oklch(100% 0 0), oklch(12% 0.01 var(--ink-hue)));

  --success: light-dark(oklch(45% 0.13 150), oklch(80% 0.15 150));
  --warning: light-dark(oklch(55% 0.14 70), oklch(85% 0.13 85));
  --danger: light-dark(oklch(50% 0.19 25), oklch(78% 0.15 25));

  --shadow-color: light-dark(oklch(30% 0.03 var(--ink-hue) / 0.14), oklch(0% 0 0 / 0.5));
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 2px 6px var(--shadow-color), 0 12px 32px -12px var(--shadow-color);
  --shadow-lg: 0 4px 12px var(--shadow-color), 0 24px 48px -16px var(--shadow-color);

  /* ---- Type ----------------------------------------------------------- */
  --font-sans: "Archivo", "Archivo Fallback", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Fluid type scale: 1.125rem base, ratio 1.2 (mobile) to 1.25 (desktop). */
  --text--1: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  --text-0: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-1: clamp(1.35rem, 1.2rem + 0.6vw, 1.56rem);
  --text-2: clamp(1.62rem, 1.35rem + 1.1vw, 1.95rem);
  --text-3: clamp(1.94rem, 1.5rem + 1.9vw, 2.44rem);
  --text-4: clamp(2.33rem, 1.6rem + 3vw, 3.05rem);
  --text-5: clamp(2.8rem, 1.7rem + 4.6vw, 3.8rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* Reading measure in rem, not ch: about 65 characters of body text, and the
   * same column edge for headings and ledes whatever their font size. */
  --measure: 42rem;
  --measure-wide: 54rem;

  /* Archivo width axis: 62–125. */
  --width-condensed: 88%;
  --width-normal: 100%;
  --width-wide: 112%;

  /* ---- Space (fluid, rhythm based on the body line) -------------------- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.63rem);
  --space-xs: clamp(0.75rem, 0.69rem + 0.3vw, 0.94rem);
  --space-s: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.38rem + 0.6vw, 1.88rem);
  --space-l: clamp(2rem, 1.84rem + 0.8vw, 2.5rem);
  --space-xl: clamp(3rem, 2.76rem + 1.2vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.68rem + 1.6vw, 5rem);
  --space-3xl: clamp(6rem, 5.5rem + 2.5vw, 7.5rem);

  --gutter: var(--space-s);
  --content-max: 72rem;

  /* ---- Shape and motion ------------------------------------------------- */
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --radius-l: 1.25rem;
  --radius-pill: 100vmax;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  --target-min: 1.5rem; /* 24 px, WCAG 2.5.8 */
  --target-comfortable: 2.75rem; /* 44 px */
}

/* The theme toggle stores an explicit choice on <html>; "system" removes it. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Users asking for more contrast get harder edges and pure text colours. */
@media (prefers-contrast: more) {
  :root {
    --text: light-dark(oklch(10% 0 0), oklch(100% 0 0));
    --text-muted: light-dark(oklch(25% 0 0), oklch(92% 0 0));
    --border: light-dark(oklch(35% 0 0), oklch(80% 0 0));
    --border-strong: var(--text);
    --link: light-dark(oklch(30% 0.12 var(--brand-hue)), oklch(88% 0.12 var(--brand-hue)));
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}

/* Motion tokens collapse to nothing for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}