/* ═══════════════════════════════════════════════════════════════════════
   static/tokens.css — Shadow design tokens (docs/css-audit.md, CONTRIBUTING.md)

   Loaded FIRST. Every component sheet (components.css) and every new rule
   should express spacing, radii, shadows, z-index, type, motion and colour
   through these tokens instead of literals.

   Colour tokens are SEMANTIC and derive from the five theme anchors that
   static/js/theme.js rewrites per preset (--bg, --fg, --panel, --border,
   --red) plus --green / --warn. Themes keep working unchanged because they
   only ever override those anchors; nothing here is theme-specific.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Spacing: 4-point scale ───────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radii (the existing --radius-sm/md/lg stay as aliases below) ─── */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Shadows / elevation ──────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.22);
  --shadow-3: 0 12px 36px rgba(0, 0, 0, 0.32);
  --shadow-4: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* ── Z-index tiers (never use literals outside this file) ─────────── */
  --z-base: 0;
  --z-raised: 10;         /* sticky headers, floating buttons inside panes */
  --z-dropdown: 300;      /* menus, pickers, session dropdowns */
  --z-dock: 500;          /* docked panes (notes, documents), sidebar on phones */
  --z-sticky: 900;        /* top bar, mobile tab bar */
  --z-modal: 1000;        /* settings, library, dialogs */
  --z-popover: 1200;      /* share dialog, avatar menu, approval cards */
  --z-overlay: 1300;      /* voice overlay, command palette */
  --z-toast: 2000;
  --z-max: 10000;         /* hard-blocking veils only */

  /* ── Typography scale ─────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: var(--mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace);
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-caps: 0.5px;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --dur-fast: 100ms;
  --dur-base: 160ms;
  --dur-slow: 260ms;
  --dur-enter: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* --ease-out / --ease-spring are defined by style.css :root and reused */

  /* ── Semantic colours (derived from theme anchors) ────────────────── */
  --c-bg: var(--bg);
  --c-fg: var(--fg);
  --c-surface: var(--panel);
  --c-surface-2: color-mix(in srgb, var(--panel) 86%, var(--fg));
  --c-surface-3: color-mix(in srgb, var(--panel) 74%, var(--fg));
  --c-surface-hover: color-mix(in srgb, var(--fg) 8%, transparent);
  --c-surface-active: color-mix(in srgb, var(--fg) 14%, transparent);
  --c-border: var(--border);
  --c-border-strong: color-mix(in srgb, var(--border) 45%, var(--fg));
  --c-border-subtle: color-mix(in srgb, var(--border) 40%, transparent);
  --c-text: var(--fg);
  --c-text-muted: color-mix(in srgb, var(--fg) 58%, transparent);
  --c-text-faint: color-mix(in srgb, var(--fg) 38%, transparent);
  --c-accent: var(--accent, var(--red));
  --c-accent-fg: var(--accent-fg, #ffffff);
  --c-accent-tint: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --c-accent-hover: color-mix(in srgb, var(--c-accent) 85%, var(--fg));
  --c-success: var(--green);
  --c-success-tint: color-mix(in srgb, var(--green) 15%, transparent);
  --c-warning: var(--warn);
  --c-warning-tint: color-mix(in srgb, var(--warn) 15%, transparent);
  --c-danger: var(--red);
  --c-danger-tint: color-mix(in srgb, var(--red) 14%, transparent);
  --c-danger-fg: #ffffff;
  --c-info: var(--color-accent, #00aaff);
  --c-veil: rgba(0, 0, 0, 0.45);
  --c-code-bg: var(--hl-bg);
  --c-code-fg: var(--hl-fg);
  --c-selection: color-mix(in srgb, var(--c-accent) 30%, transparent);

  /* ── Control sizing ───────────────────────────────────────────────── */
  --control-h-sm: 26px;
  --control-h-md: 32px;
  --control-h-lg: 40px;
  --control-pad-x: var(--space-3);
  --tap-target: 44px;
}

/* Reduced motion: motion tokens collapse to zero so every component that
   uses them respects the OS preference without extra rules. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-enter: 0ms;
  }
}