/*
 * Design tokens — the single source of truth for colour, space, type, and motion.
 * Components in site.css consume these and never hard-code raw values.
 *
 * Colour tokens are theme-aware via light-dark(); the theme is chosen by
 * color-scheme, which the toggle overrides through the data-theme attribute.
 */

:root {
  color-scheme: dark light;

  /* Colour — surfaces */
  --color-background: light-dark(#f5faf8, #070a0c);
  --color-surface: light-dark(#ffffff, #0e1418);
  --color-surface-raised: light-dark(#eaf4f1, #131b20);
  --color-code-background: light-dark(#eaf4f1, #0e1418);

  /* Colour — text */
  --color-text-primary: light-dark(#102426, #eff8f7);
  --color-text-secondary: light-dark(#4f6568, #9cacaf);
  --color-text-tertiary: light-dark(#6d7f82, #738185);

  /* Colour — accent */
  --color-accent: light-dark(#087f70, #68edd8);
  --color-accent-hover: light-dark(#056657, #9bf6e8);

  /* Colour — derived from the tokens above, so a palette change ripples through */
  --color-border: color-mix(in srgb, var(--color-text-primary) 14%, transparent);
  --color-border-hover: color-mix(in srgb, var(--color-accent) 42%, transparent);
  --color-surface-hover: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --color-header-scrolled: color-mix(in srgb, var(--color-background) 72%, transparent);
  --color-focus-ring: var(--color-accent);

  /* Colour — decorative */
  --color-glow-blue: light-dark(rgba(75, 112, 214, 0.12), rgba(118, 168, 255, 0.14));
  --color-glow-aqua: color-mix(in srgb, var(--color-accent) 9%, transparent);
  --color-shadow-floating: light-dark(rgba(24, 50, 50, 0.16), rgba(0, 0, 0, 0.28));
  --gradient-hero: linear-gradient(
    105deg,
    light-dark(#102426, #ffffff) 8%,
    light-dark(#087f70, #a8f7ec) 47%,
    light-dark(#496ab5, #8eb5ff) 98%
  );

  /* Space — 4px base, numeric names map straight to the pixel value */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* Typography */
  --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-size-2xs: 12px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 15px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-lede: clamp(19px, 2vw, 24px);
  --font-size-title: clamp(31px, 4vw, 50px);
  --font-size-display: clamp(56px, 10vw, 132px);

  --font-weight-normal: 450;
  --font-weight-medium: 600;
  --font-weight-semibold: 680;
  --font-weight-bold: 700;
  --font-weight-display: 740;

  --line-height-display: 0.93;
  --line-height-heading: 1.08;
  --line-height-snug: 1.4;
  --line-height-body: 1.6;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-wide: 0.08em;

  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-lg: 14px;
  --radius-round: 50%;

  /* Minimum comfortable touch target */
  --size-touch-target: 44px;

  /* Borders and elevation */
  --border-hairline: 1px solid var(--color-border);
  --border-focus-ring: 2px solid var(--color-focus-ring);
  --shadow-card-hover: 0 12px 32px var(--color-shadow-floating);

  /* Motion */
  --duration-fast: 160ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layers */
  --layer-header: 20;

  /* Layout */
  --layout-max-width: 1120px;
  --layout-measure: 620px;
  --layout-measure-narrow: 540px;
  --layout-reading-width: 760px;
  --layout-gutter: var(--space-12);
  --header-height: 68px;
}

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

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

@media (max-width: 720px) {
  :root {
    --font-size-display: clamp(48px, 14vw, 84px);
    --font-size-lede: var(--font-size-lg);
    --layout-gutter: var(--space-9);
    --header-height: 60px;
  }
}