@layer base, typography;
/**
 * @section Theme Token Sources
 * Base colour tokens are defined in styles/colours.css.
 * Browsers with OKLCH support receive progressive overrides from styles/enhancements.css.
 * Typography token ownership is delegated to styles/typography.css.
 */
@import url('./colours.css') layer(base);
@import url('./enhancements.css') layer(base);
@import url('./typography.css') layer(typography);

@layer base {
  :root {
    /* Typography - web fonts with system fallbacks for offline */
    --font-display: 'Syne',           system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

    /* Layout */
    --max-width: 1160px;
    --gutter:    clamp(1.25rem, 5vw, 2.5rem);

    /* Motion */
    --dur-fast: 120ms;
    --dur-base: 280ms;
    --dur-slow: 560ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Collapse all motion tokens - nothing else needs to change */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0ms;
      --dur-base: 0ms;
      --dur-slow: 0ms;
    }
  }

  /* ── Base element styles ─────────────────────────────────────────────────── */
  html {
    background: var(--colour-background);
    color: var(--colour-text-primary);
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  :focus-visible {
    outline: 2px solid var(--colour-accent);
    outline-offset: 3px;
    border-radius: 3px;
  }
}