/* ============================================================= tokens.css
   Phase 2 foundation. Loads BEFORE app.css so it can add the scales the old
   sheet never had (spacing, type, focus, shadow) without disturbing the colour
   tokens app.css already defines. Colours stay in app.css for now and are
   aliased here to spec-named variables so both names resolve during the
   incremental migration.

   Nothing here changes an existing screen — it only makes new tokens available.
   ========================================================================= */

:root {
  /* 8px spacing scale (a couple of half-steps for dense operational UI). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Type scale. Tabular numerals everywhere numbers are compared. */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fw-normal: 450;
  --fw-medium: 550;
  --fw-semibold: 650;
  --fw-bold: 720;
  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --num: "tnum" 1, "lnum" 1;   /* font-feature-settings for tabular numerals */

  /* Radii — adds the pill/tag steps that were previously literals. */
  --radius-pill: 20px;
  --radius-tag: 4px;

  /* Shadow scale. --shadow (from app.css) is the medium step; add sm/lg. */
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, 0.05);
  --shadow-md: 0 1px 2px rgba(11, 11, 11, 0.04), 0 4px 12px rgba(11, 11, 11, 0.04);
  --shadow-lg: 0 8px 30px -12px rgba(11, 11, 11, 0.28);

  /* Focus ring — single source of truth for keyboard focus. */
  --focus-ring: 2px solid var(--series-1);
  --focus-offset: 2px;

  /* Table density. */
  --row-pad-y: 7px;
  --row-pad-x: 10px;

  /* -------- Spec-named semantic aliases (map onto existing colour tokens) --
     Lets new components/macros use the vocabulary in the brief while the old
     sheet keeps its names. One palette, two names, no divergence. */
  --color-bg: var(--plane);
  --color-surface: var(--surface-1);
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-border: var(--border);
  --color-accent: var(--series-1);
  --color-positive: var(--good);
  --color-attention: var(--warning);
  --color-critical: var(--critical);
  --color-serious: var(--serious);
}

/* Deeper shadow in dark mode (both the auto and explicit dark selectors). */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { --shadow-lg: 0 8px 30px -10px rgba(0, 0, 0, 0.6); }
}
:root[data-theme="dark"] { --shadow-lg: 0 8px 30px -10px rgba(0, 0, 0, 0.6); }