/* Speedrunning AI — design tokens.
   Implements DESIGN_RESEARCH_REPORT.md section B verbatim ("Soft Signal Dark").
   This file is the single source of truth for colour, type, space and motion.
   Component CSS must consume these tokens and never hard-code a hex value. */

:root {
  color-scheme: dark;

  /* Canvas and surfaces: Soft Signal Dark */
  --bg-canvas: #111117;
  --bg-subtle: #17171f;
  --surface-1: #1d1d27;
  --surface-2: #252532;
  --surface-3: #30303f;
  --surface-inset: #0d0d12;
  --surface-scrim: rgba(5, 5, 9, 0.72);

  /* Text */
  --text-primary: #f4f1fa;
  --text-secondary: #c9c5d2;
  --text-muted: #9f99a9;
  --text-disabled: #777281;
  --text-inverse: #111117;

  /* Violet action family */
  --accent-700: #5b21b6;
  --accent-600: #6d28d9;
  --accent-500: #7c3aed;
  --accent-400: #8150e8;
  --accent-300: #a78bfa;
  --accent-muted: rgba(124, 58, 237, 0.16);
  --accent-soft: rgba(167, 139, 250, 0.1);
  --accent-border: rgba(167, 139, 250, 0.38);
  --accent-text: #a78bfa;
  --action-bg: var(--accent-500);
  --action-bg-hover: var(--accent-400);
  --action-bg-active: var(--accent-600);
  --action-fg: #ffffff;

  /* Stance/status: pair colour with text and icon in every instance */
  --bullish: #34d399;
  --bullish-bg: #14372c;
  --bullish-border: #276b55;
  --neutral: #fbbf24;
  --neutral-bg: #3a2d08;
  --neutral-border: #80651a;
  --skeptical: #fb7185;
  --skeptical-bg: #401b26;
  --skeptical-border: #84364a;
  --mixed: #67e8f9;
  --mixed-bg: #14343a;
  --mixed-border: #2a717c;
  --unknown: #b2acbb;
  --unknown-bg: #2a2831;
  --unknown-border: #5b5664;

  /* Product states */
  --info: #60a5fa;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --confirmed: #34d399;
  --developing: #fbbf24;
  --watching: #a78bfa;
  --debunked: #9a94a4;

  /* Dividers and required control boundaries */
  --border-hairline: #333342;
  --border-default: #403d4a;
  --border-hover: #575263;
  --border-strong: #7b7389;
  --focus-ring: #a78bfa;
  --focus-gap: #111117;

  /* Glass: only header-on-scroll, command panel, completion toast */
  --glass-bg: rgba(23, 23, 31, 0.78);
  --glass-bg-strong: rgba(23, 23, 31, 0.9);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --glass-blur: 14px;
  --glass-blur-mobile: 10px;

  /* Typography: Signal Ledger */
  --font-editorial: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-display: clamp(2.5rem, 4.6vw, 4.25rem);
  --text-h1: clamp(2.125rem, 3.1vw, 3.25rem);
  --text-h2: clamp(1.625rem, 2vw, 2.125rem);
  --text-h3: 1.375rem;
  --text-title: 1.1875rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-data: 0.875rem;
  --text-micro: 0.75rem;

  --leading-display: 0.98;
  --leading-heading: 1.12;
  --leading-body: 1.6;
  --leading-compact: 1.35;
  --tracking-display: -0.025em;
  --tracking-heading: -0.018em;
  --tracking-body: -0.006em;
  --tracking-label: 0.075em;
  --tracking-data: -0.01em;

  /* 4px base spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Shape */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* Dark elevation: edge + low-opacity shadow, never glow-only */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 40px rgba(0, 0, 0, 0.28);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 64px rgba(0, 0, 0, 0.38);
  --shadow-focus: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus-ring);

  /* Motion */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --duration-celebrate: 480ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layout and controls */
  --content-max: 74rem;
  --reading-max: 44rem;
  --aside-width: 22rem;
  --sheet-width: 26.25rem;
  --header-height: 4rem;
  --header-height-mobile: 3.5rem;
  --control-height: 2.5rem;
  --target-min: 2.75rem;
  --row-default: 3.5rem;
  --row-compact: 2.5rem;
  --z-header: 40;
  --z-sheet: 60;
  --z-dialog: 80;
  --z-toast: 100;
}