/*
  tokens.css — generated from brand/tokens.json (G3.1) per docs/build-contract.md §1/§5.
  Direction A only. Do not hand-edit colour/type/spacing values here without also updating
  brand/tokens.json — this file is the derived artefact, that JSON is the source of truth.

  Theming rule (plan §0.3 "Theme-aware"): full light palette lives on bare :root; the dark
  palette is repeated twice — once under prefers-color-scheme guarded so an explicit
  data-theme="light" always wins, and once under :root[data-theme="dark"] so an explicit
  toggle wins in both directions. body carries an explicit token background (never
  transparent) so the host page never bleeds through.
*/

:root {
  /* colour — light (brand/tokens.json color.light) */
  --bg: #F7F5F2;
  --surface: #FFFFFF;
  --surface-alt: #EFEBE4;
  --border: #D8D3C9;
  --text-primary: #1C1A17;
  --text-secondary: #4A453E;
  --text-on-accent: #FFFFFF;
  --accent: #A0470A;
  --accent-hover: #833A08;
  --accent-2: #0F6B66;
  --status-active: #0F6B66;
  --status-prototype: #A0470A;
  --status-docs-only: #4A453E;
  --status-dormant: #8C8578;
  --focus-ring: #A0470A;

  /* type (brand/tokens.json type) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 3.75rem;
  --leading-tight: 1.15;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* spacing (brand/tokens.json spacing, base-4 scale) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* radius (brand/tokens.json radius) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

/* dark palette — OS preference, unless the viewer explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14120F;
    --surface: #1E1B17;
    --surface-alt: #262219;
    --border: #34302A;
    --text-primary: #F3EFE8;
    --text-secondary: #C9C2B5;
    --text-on-accent: #14120F;
    --accent: #E98A3D;
    --accent-hover: #F4A362;
    --accent-2: #4FD1C7;
    --status-active: #4FD1C7;
    --status-prototype: #E98A3D;
    --status-docs-only: #C9C2B5;
    --status-dormant: #7A7367;
    --focus-ring: #E98A3D;
  }
}

/* dark palette — explicit toggle wins in both directions */
:root[data-theme="dark"] {
  --bg: #14120F;
  --surface: #1E1B17;
  --surface-alt: #262219;
  --border: #34302A;
  --text-primary: #F3EFE8;
  --text-secondary: #C9C2B5;
  --text-on-accent: #14120F;
  --accent: #E98A3D;
  --accent-hover: #F4A362;
  --accent-2: #4FD1C7;
  --status-active: #4FD1C7;
  --status-prototype: #E98A3D;
  --status-docs-only: #C9C2B5;
  --status-dormant: #7A7367;
  --focus-ring: #E98A3D;
}

body {
  background: var(--bg);
  color: var(--text-primary);
}