/*
 * tokens.css — Direction 3 (Tabler + Fluent 2) design tokens, for the
 * marketing site.
 *
 * SUPERSEDES MEASURED PAPER. See, in the Agile Gauge product repo:
 *   docs/decisions/2026-09-21-design-system-direction-3.md (the decision)
 *   docs/design/2026-09-21-modern/3-tabler-fluent/ (the specification)
 *   src/hub/tokens.css (the product's own implementation)
 *
 * Every token name shared with the product carries the EXACT SAME VALUE as
 * src/hub/tokens.css, copied verbatim, so the site and the extension read as
 * one product. This file is trimmed to what a marketing site needs: no
 * chart/series/gridline tokens (this site draws no charts), and only the one
 * status tone (warning) actually used here, for the legal-page draft banner.
 *
 * THEME: default is light. :root[data-theme='dark'] is an explicit override
 * set by js/theme.js when a viewer picks dark from the toggle (persisted in
 * localStorage). Absent an explicit choice, prefers-color-scheme decides —
 * guarded so an explicit "light" choice is never overruled by the OS.
 *
 * Shadows exist in LIGHT mode only, per the product's own rule — dark mode
 * stays flat and gets its depth from borders instead (the --shadow-* tokens
 * resolve to `none` under [data-theme='dark']).
 */

:root,
:root[data-theme='light'] {
  color-scheme: light;

  --page: #f5f7fa;
  --surface: #ffffff;
  --surface-sunken: #eef1f5;

  --rule: #e2e5ea;
  --rule-strong: #c9ced6;

  --ink: #1f2937;
  --ink-secondary: #5b6472;
  --ink-muted: #6b7280;

  --accent: #4d4fb0;
  --accent-fill: #5b5fc7;
  --accent-on: #ffffff;
  --accent-wash: #eeeefb;
  --accent-tint: #eeeefb;

  --warning-mark: #b07a00;
  --warning-text: #7a4a00;
  --warning-tint: #fdf1d9;

  --focus-ring: #4d4fb0;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md:
    0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg:
    0 12px 32px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.06);
}

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

  --page: #1a1d21;
  --surface: #232830;
  --surface-sunken: #15181b;

  --rule: #2d333d;
  --rule-strong: #3a4049;

  --ink: #eef0f3;
  --ink-secondary: #9aa4b2;
  --ink-muted: #8891a0;

  --accent: #b3b5ef;
  --accent-fill: #5b5fc7;
  --accent-on: #1b1a16;
  --accent-wash: #262a45;
  --accent-tint: #262a45;

  --warning-mark: #f5a623;
  --warning-text: #f5a623;
  --warning-tint: #3a2c0c;

  --focus-ring: #b3b5ef;

  /* Dark stays flat — kept as real tokens so a rule can read var(--shadow-md)
     unconditionally in both themes rather than branching. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme='light'])) {
    color-scheme: dark;

    --page: #1a1d21;
    --surface: #232830;
    --surface-sunken: #15181b;
    --rule: #2d333d;
    --rule-strong: #3a4049;
    --ink: #eef0f3;
    --ink-secondary: #9aa4b2;
    --ink-muted: #8891a0;
    --accent: #b3b5ef;
    --accent-fill: #5b5fc7;
    --accent-on: #1b1a16;
    --accent-wash: #262a45;
    --accent-tint: #262a45;
    --warning-mark: #f5a623;
    --warning-text: #f5a623;
    --warning-tint: #3a2c0c;
    --focus-ring: #b3b5ef;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}

:root {
  /* One typeface, Inter, self-hosted variable font — see css/fonts.css.
     --font-display is kept as a name for markup/CSS symmetry with the
     product's tokens.css, and resolves to the same stack: no display/body
     split any more, no serif anywhere. */
  --font-sans:
    'Inter Variable', 'Inter', -apple-system, 'Segoe UI', system-ui,
    sans-serif;
  --font-display: var(--font-sans);

  --text-overline: 11px;
  --text-caption: 12px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-card-title: 16px;
  --text-title: 28px;
  --text-hero: 48px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --tracking-overline: 0.12em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius: var(--radius-md);
  --hairline: 1px;

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --duration-fast: 90ms;
  --duration: 140ms;

  /* The wide shell width (nav, hero, feature grid, pricing) vs. a narrower
     column for long-form legal prose — see .legal-body in site.css. */
  --content-width: 1120px;
  --content-width-prose: 760px;
}

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