/* Design tokens: the ONLY place raw colours, sizes, shadows and motion live.
   Colours use light-dark(): every page sets <html data-theme="light|dark"> from the header toggle
   (core/theme.js, light by default); without it they follow the OS (`color-scheme: light dark`).
   Legacy names (F01-F17) are kept as aliases at the bottom so older component CSS keeps working. */
:root { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

:root {
  /* Surfaces and text */
  --color-bg: light-dark(#f8fafc, #0f1523);
  --color-canvas-bg: light-dark(#eef1f6, #090d16);
  --color-canvas-dot: light-dark(#cbd5e1, #1e293b);
  --color-surface: light-dark(#ffffff, #161f30);
  --color-surface-elevated: light-dark(#ffffff, #1e293b);
  --color-surface-muted: light-dark(#f1f5f9, #111827);
  --color-surface-hover: light-dark(#f1f5f9, #1e293b);
  --color-paper: #ffffff;
  --color-paper-border: light-dark(#cbd5e1, #334155);
  --color-text: light-dark(#0f172a, #f1f5f9);
  --color-text-secondary: light-dark(#475569, #94a3b8);
  --color-text-muted: light-dark(#526077, #8a99ad);
  --color-border: light-dark(#e2e8f0, #263248);
  --color-border-strong: light-dark(#64748b, #52637a);
  --color-scrim: light-dark(rgb(15 23 42 / 0.55), rgb(2 6 15 / 0.7));
  --color-toast-bg: #0f172a;
  --color-toast-text: #f1f5f9;
  --color-toast-accent: #6ee7b7;
  --color-toast-link: #9eb0ff;
  /* Primary and focus */
  --color-primary: light-dark(#2538b8, #8fa0ff);
  --color-primary-hover: light-dark(#1d2c96, #a5b4fc);
  --color-primary-text: light-dark(#ffffff, #090d16);
  --color-primary-subtle: light-dark(#eef2ff, #172142);
  --color-primary-highlight: light-dark(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.25));
  --color-focus-ring: light-dark(#2538b8, #8fa0ff);
  --color-link: light-dark(#2538b8, #9eb0ff);
  --color-link-hover: light-dark(#1d2c96, #c7d0ff);
  /* Semantic status (never used for document bands) */
  --color-success-bg: light-dark(#ecfdf5, #063226);
  --color-success-text: light-dark(#065f46, #6ee7b7);
  --color-success-border: light-dark(#10b981, #059669);
  --color-success-dot: #10b981;
  --color-warning-bg: light-dark(#fffbeb, #3b2106);
  --color-warning-text: light-dark(#92400e, #fcd34d);
  --color-warning-border: light-dark(#f59e0b, #d97706);
  --color-danger: light-dark(#b91c1c, #f87171);
  --color-danger-bg: light-dark(#fef2f2, #3f1116);
  --color-danger-text: light-dark(#991b1b, #fca5a5);
  --color-danger-border: light-dark(#ef4444, #dc2626);
  --color-info-bg: light-dark(#eff6ff, #102347);
  --color-info-text: light-dark(#1e40af, #93c5fd);
  --color-info-border: light-dark(#3b82f6, #2563eb);
  --color-changed-bg: light-dark(#f5f3ff, #261447);
  --color-changed-text: light-dark(#5b21b6, #c4b5fd);
  --color-changed-border: light-dark(#8b5cf6, #7c3aed);
  --color-changed-ring: light-dark(#c4b5fd, #7c3aed);
  --color-hatch-line: light-dark(#94a3b8, #475569);
  --color-skeleton-base: light-dark(#e8edf3, #1b2538);
  --color-skeleton-sheen: light-dark(rgb(255 255 255 / 0.65), rgb(255 255 255 / 0.06));
  /* Document bands: separation only, colour carries no meaning (adjacent documents never share one).
     Index 7 is olive, not red, so no band reads as an error. */
  --band-0: light-dark(#3b6fd8, #7aa2f7); --band-0-tint: light-dark(#eff4fd, #13213f);
  --band-1: light-dark(#d9822b, #f0a35e); --band-1-tint: light-dark(#fdf4ea, #2e1d0b);
  --band-2: light-dark(#2f9e6e, #5cc99a); --band-2-tint: light-dark(#ebf7f1, #0c2a1e);
  --band-3: light-dark(#b8489a, #e07cc4); --band-3-tint: light-dark(#f9edf6, #2f1128);
  --band-4: light-dark(#7a5cd6, #a891f0); --band-4-tint: light-dark(#f3effc, #1f1840);
  --band-5: light-dark(#c0a020, #e3c64a); --band-5-tint: light-dark(#fbf7e6, #2b2408);
  --band-6: light-dark(#1f9bb0, #4fc3d6); --band-6-tint: light-dark(#e9f6f8, #0a2a30);
  --band-7: light-dark(#6f8f2a, #a3c24a); --band-7-tint: light-dark(#f2f6e8, #1d2709);
  /* Elevation */
  --shadow-1: 0 1px 3px rgb(15 23 42 / 0.06), 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-2: 0 20px 25px -5px rgb(15 23 42 / 0.14), 0 8px 10px -6px rgb(15 23 42 / 0.08);
  --shadow-toast: 0 8px 24px rgb(16 24 40 / 0.24);
  --ambient-opacity: 0.22;

  /* Home and shared page theme (board P1): follow <html data-theme>, light by default (core/theme.js). */
  --home-bg: light-dark(#f6f8fc, #090d16);
  --home-text: light-dark(#0f172a, #f1f5f9);
  --home-lede: light-dark(#475569, #a9b6cc);
  --home-muted: light-dark(#526077, #94a3b8);
  --home-meta: light-dark(#5b6b82, #8a99ad);
  --home-accent: light-dark(#2538b8, #8fa0ff);
  --home-accent-soft: light-dark(#2538b8, #9eb0ff);
  --home-border: light-dark(#e2e8f0, #263248);
  --home-border-strong: light-dark(#94a3b8, #52637a);
  --home-rule: light-dark(#e2e8f0, #1e293b);
  --home-card: light-dark(rgb(255 255 255 / 0.72), rgb(22 31 48 / 0.62));
  --home-card-strong: light-dark(rgb(255 255 255 / 0.9), rgb(22 31 48 / 0.78));
  --home-stage: light-dark(rgb(255 255 255 / 0.7), rgb(15 21 35 / 0.72));
  --home-row-hover: light-dark(#eef2f8, #1e293b);
  --home-row-hover-border: light-dark(#d5dce8, #2a364f);
  --home-glow-a: light-dark(rgb(37 56 184 / 0.16), rgb(37 56 184 / 0.55));
  --home-glow-b: light-dark(rgb(122 92 214 / 0.14), rgb(122 92 214 / 0.42));
  --home-glow-c: light-dark(rgb(31 155 176 / 0.12), rgb(31 155 176 / 0.28));
  --home-grid-line: light-dark(rgb(37 56 184 / 0.06), rgb(143 160 255 / 0.075));
  --home-fleck-border: light-dark(rgb(37 56 184 / 0.25), rgb(158 176 255 / 0.35));
  --home-fleck-fill: light-dark(rgb(255 255 255 / 0.7), rgb(30 41 59 / 0.55));
  --home-sheet: #f8fafc;
  --home-sheet-border: #cbd5e1;
  --home-sheet-id: #0f172a;
  --home-sheet-text: #475569;
  --home-sheet-shadow: 0 10px 30px rgb(15 23 42 / 0.14);
  --home-live: light-dark(#059669, #6ee7b7);
  --home-live-ring: light-dark(rgb(5 150 105 / 0.45), rgb(110 231 183 / 0.55));
  --home-live-ring-off: light-dark(rgb(5 150 105 / 0), rgb(110 231 183 / 0));
  --home-fade: light-dark(rgb(246 248 252 / 0), rgb(9 13 22 / 0));
  /* Shared page theme (motion.css): every page uses the Home look */
  --glass-bar: light-dark(rgb(255 255 255 / 0.8), rgb(9 13 22 / 0.72));
  --glass-panel: light-dark(rgb(248 250 252 / 0.94), rgb(17 24 39 / 0.82));
  --glow-accent: light-dark(rgb(37 56 184 / 0.22), rgb(143 160 255 / 0.32));
  --glow-accent-soft: light-dark(rgb(37 56 184 / 0.08), rgb(143 160 255 / 0.12));
  --glow-accent-off: light-dark(rgb(37 56 184 / 0), rgb(143 160 255 / 0));

  /* Typography */
  --font-sans: 'Inter Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  --text-display: 3.25rem;
  --text-xl: 1.75rem;
  --text-lg: 1.375rem;
  --text-md: 1.125rem;
  --text-base: 0.9375rem;
  --text-body: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-xs: 0.75rem;
  --text-mono: 0.75rem;
  --text-kbd: 0.6875rem;
  --leading-tight: 1.2;
  --leading-display: 1.08;
  --leading-heading: 1.25;
  --leading-snug: 1.4;
  --leading-body: 1.55;
  --tracking-hero: -0.025em;
  --tracking-display: -0.02em;
  --tracking-title: -0.015em;
  --tracking-section: -0.01em;
  --tracking-caps: 0.04em;
  --tracking-eyebrow: 0.08em;

  /* Space, radius, sizes */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --gutter: 1rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;
  --border-width: 1px;
  --stripe-width: 6px;
  --focus-ring: 3px;
  --target-min: 2.75rem;
  --control-md: 2.5rem;
  --control-sm: 2.25rem;
  --icon-size: 1.25rem;
  --topbar-height: 3.5rem;
  --subbar-height: 3rem;
  --content-width: 46rem;
  --narrow-width: 42.5rem;
  --form-width: 52.5rem;
  --home-width: 75rem;
  --report-width: 67.5rem;
  --wide-width: 100rem;
  --sidebar-width: 18.75rem;
  --panel-width: 25rem;
  --panel-width-tablet: 21.25rem;
  --drawer-width: 26rem;
  --tile-min: 13.75rem;
  --page-width: 40rem;
  --page-aspect: 1 / 1.414;
  --progress-height: 0.5rem;
  --hatch-step: 8px;

  /* Motion: opacity and transform only */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-shimmer: 1400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shadows are not colours, so light-dark() cannot carry them. */
:root[data-theme="dark"] {
  --shadow-1: 0 0 0 1px #263248, 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-2: 0 0 0 1px #334155, 0 20px 30px rgb(0 0 0 / 0.65);
  --ambient-opacity: 0.14;
  --home-sheet-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 0 0 1px #263248, 0 4px 12px rgb(0 0 0 / 0.35);
    --shadow-2: 0 0 0 1px #334155, 0 20px 30px rgb(0 0 0 / 0.65);
    --ambient-opacity: 0.14;
    --home-sheet-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}

/* Legacy aliases (pre-redesign names still used by feature CSS and JS-built markup). */
:root {
  --font: var(--font-sans);
  --radius: var(--radius-md);
  --duration: var(--duration-base);
  --ease: var(--ease-standard);
  --text-2xl: var(--text-xl);
  --color-muted: var(--color-text-muted);
  --color-surface-alt: var(--color-surface-muted);
  --color-surface-sunken: var(--color-canvas-bg);
  --color-on-primary: var(--color-primary-text);
  --color-primary-bg: var(--color-primary-subtle);
  --color-focus: var(--color-focus-ring);
  --color-success: var(--color-success-text);
  --color-warning: var(--color-warning-text);
  --color-info: var(--color-info-text);
  --color-changed: var(--color-changed-text);
  --color-excluded-bg: var(--color-surface-muted);
  --color-skeleton: var(--color-skeleton-base);
  --color-hatch: var(--color-hatch-line);
  --pattern-hatch: repeating-linear-gradient(-45deg, var(--color-hatch-line) 0 2px, transparent 2px var(--hatch-step));
  /* F13 flags and F11 clarification cards: status colours only, never the band palette. */
  --flag-duplicate-fg: var(--color-changed-text);
  --flag-duplicate-bg: var(--color-changed-bg);
  --flag-illegible-fg: var(--color-warning-text);
  --flag-illegible-bg: var(--color-warning-bg);
  --flag-info-fg: var(--color-info-text);
  --flag-info-bg: var(--color-info-bg);
  --color-question-bg: var(--color-info-bg);
  --color-question-border: var(--color-info-border);
  --color-blocked-bg: var(--color-warning-bg);
  --color-blocked-border: var(--color-warning-border);
}