/*
 * L2 — semantic role tokens.
 * DESIGN_LAYER_VERSION is stamped on the HTML <link>, not here.
 *
 * This is the only file under dashboard/styles/ that may reference TIER 1
 * primitives (--ca-*). Components, patterns, and the shell consume these
 * roles — never --ca-ink-* / --ca-violet-* / --ca-paper-* directly.
 *
 * Role families (architecture v2 §4 L2, aligned with contract §5.2 / WP1-A2):
 *   surface, text, border, accent, mark, value, metric, status,
 *   control, focus, font, type, space, radius, elevation, motion, shell.
 */
:root {
  /* —— Surface —— */
  --surface-canvas: var(--ca-ink-950);
  --surface-page: var(--ca-ink-950);
  --surface-inset: var(--ca-ink-900);
  --surface-panel: var(--ca-ink-850);
  --surface-elevated: var(--ca-ink-800);
  --surface-raised: var(--ca-ink-750);
  --surface-overlay: var(--ca-black-a-60);
  --surface-header: var(--ca-ink-1000);
  --surface-inverse: var(--ca-paper-50);
  --surface-1: var(--ca-ink-850);
  --surface-2: var(--ca-ink-800);
  --surface-3: var(--ca-ink-750);

  /* Board fills are FLAT (2026-09-10). The reference renderings are a matte
     near-black desk: colour comes from team identity, status and data, never
     from ambient washes or lacquer on the chrome. These were gradients; the
     result read as generic and fought the crisp panel edges the renderings
     rely on. Kept as roles (not raw inks) so a future skin can swap them. */
  --surface-board: var(--ca-ink-900);
  --surface-board-raised: var(--ca-ink-850);
  --surface-field: var(--ca-ink-800);
  --canvas-ambient: none;

  /* —— Text —— */
  --text-primary: var(--ca-paper-50);
  --text-secondary: var(--ca-paper-400);
  --text-meta: var(--ca-paper-400);
  /* Was --ca-paper-500 (#6E7383), which measured 3.89–4.02:1 on the card and
     canvas grounds — under AA everywhere it appeared. --ca-paper-400 clears
     4.5:1 on both --ca-ink-850 and --ca-ink-1000. */
  --text-muted: var(--ca-paper-400);
  --text-disabled: var(--ca-paper-600);
  --text-accent: var(--ca-violet-300);
  --text-on-accent: var(--ca-paper-50);
  --text-inverse: var(--ca-ink-950);

  /* —— Border —— */
  --border-default: var(--ca-line-600);
  --border-strong: var(--ca-line-500);
  --border-subtle: var(--ca-white-a-06);
  --border-accent: var(--ca-violet-a-32);
  --border-focus: var(--ca-violet-500);
  --border-inverse: var(--ca-light-line);

  /* —— Accent (violet brand; never a metric) —— */
  --accent: var(--ca-violet-500);
  --accent-soft: var(--ca-violet-a-11);
  --accent-strong: var(--ca-violet-700);
  --accent-text: var(--ca-violet-300);
  --accent-glow: var(--ca-violet-a-32);

  /* Model Center's surfaces. Two products, two design layers: the public desk
     is near-black with violet held back for navigation, and Model Center is
     the entitled product, carrying the brand into the surface itself. Named
     here so the route layer never reaches for a primitive. */
  --surface-mc-page: var(--ca-mc-900);
  --surface-mc-panel: var(--ca-mc-850);
  --surface-mc-raised: var(--ca-mc-800);
  --surface-mc-field: var(--ca-violet-deep-900);
  --surface-mc-hover: var(--ca-violet-deep-800);

  /* Distribution segments. A stacked bar needs a set of hues that stay
     distinguishable in both themes and never read as good-to-bad, because the
     segments are categories - coverage shells, target shares - not a scale. */
  --series-1: var(--ca-violet-500);
  --series-2: var(--ca-violet-300);
  --series-3: var(--ca-teal-400);
  --series-4: var(--ca-amber-400);
  --series-5: var(--ca-violet-700);
  --series-6: var(--ca-blue-300);
  --series-7: var(--ca-red-400);
  /* Board chrome: the 3px brand edge and the top-edge glint that reads as the
     light source. Roles, so L5–L7 never reach for a --ca-* primitive. */
  --edge-brand: var(--ca-grad-brand);
  /* Metallic display fill for major page titles. Model Center, the 404 and the
     glossary already painted their h1 this way via .ca-page-title, while the
     matchup routes rendered flat white - the site read as two products. This
     is the role so L7 can use it without touching a TIER 1 primitive. */
  --text-display-metal: var(--ca-grad-metal-silver);
  --edge-glint: linear-gradient(90deg, var(--ca-violet-a-32), transparent 70%);

  /* —— Status tints (chip grounds) —— */
  --tint-positive: var(--ca-green-a-13);
  --tint-caution: var(--ca-amber-a-13);
  --tint-negative: var(--ca-red-a-13);

  /* —— Mark (chrome) vs value (readable data) —— */
  --mark-positive: var(--ca-green-500);
  --mark-negative: var(--ca-red-500);
  --mark-caution: var(--ca-amber-500);
  --value-positive: var(--ca-green-400);
  --value-negative: var(--ca-red-200);
  --value-caution: var(--ca-amber-400);

  /* —— Metric ramp (green = elite → red = poor) —— */
  --metric-very-weak: var(--ca-red-500);
  --metric-weak: var(--ca-red-400);
  --metric-below: var(--ca-amber-500);
  --metric-neutral: var(--ca-paper-neutral);
  --metric-above: var(--ca-green-400);
  --metric-strong: var(--ca-green-300);
  --metric-elite: var(--ca-green-200);
  --metric-good: var(--ca-green-400);
  --metric-watch: var(--ca-amber-500);
  --metric-poor: var(--ca-red-500);

  /* —— Status —— */
  --status-ok: var(--ca-green-200);
  --status-live: var(--ca-green-200);
  --status-stale: var(--ca-amber-400);
  --status-error: var(--ca-red-500);
  --status-loading: var(--ca-violet-300);

  /* —— Control —— */
  --control-bg: var(--ca-ink-800);
  --control-bg-hover: var(--ca-ink-750);
  --control-bg-active: var(--ca-violet-a-16);
  --control-border: var(--ca-line-500);
  --control-text: var(--ca-paper-50);

  /* —— Focus —— */
  --focus-ring: var(--ca-violet-500);
  --focus-ring-offset: var(--ca-ink-950);

  /* —— Shadow / elevation raw values (roles) —— */
  --shadow-board: var(--ca-black-a-50);
  --shadow-inset: var(--ca-white-a-08);
  --shadow-deep: var(--ca-black-a-60);

  /* —— Font families —— */
  --font-ui: var(--ca-font-ui);
  --font-display: var(--ca-font-display);
  --font-body: var(--ca-font-ui);

  /* —— Type scale (px; floor is 12 — no user-facing text below) —— */
  --type-12: 12px;
  --type-14: 14px;
  --type-16: 16px;
  --type-18: 18px;
  --type-20: 20px;
  --type-24: 24px;
  --type-28: 28px;
  --type-32: 32px;
  --type-40: 40px;
  --type-48: 48px;
  --type-64: 64px;
  --type-meta: var(--type-12);
  --type-ui: var(--type-14);
  --type-body: var(--type-14);
  --type-h3: var(--type-18);
  --type-h2: var(--type-24);
  /* Display sizes scale with the viewport. The flat 28/32px h1 made the 1440px
     layout render at mobile type size — see audit D3. */
  --type-h1: clamp(28px, 1.4rem + 1.5vw, 44px);
  --type-display: clamp(32px, 1.5rem + 2.4vw, 56px);
  --type-score: clamp(32px, 1.6rem + 2.2vw, 52px);
  --type-section: clamp(20px, 1rem + 0.7vw, 26px);
  --leading-tight: 1.15;
  --leading-body: 1.45;
  --tracking-caps: 0.08em;

  /* —— Spacing: 4px scale only —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* —— Radius —— */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* —— Elevation —— */
  /* Depth on a matte desk comes from the border and the fill step, not from
     shadow. The glow ramp is retained for surfaces that genuinely lift (menus,
     dialogs) but no longer paints the resting slate. */
  --elevation-0: none;
  --elevation-1: none;
  --elevation-2: none;
  --elevation-3: 0 16px 48px var(--shadow-deep);
  --elevation-glow: var(--ca-glow-violet);
  --elevation-glow-strong: var(--ca-glow-violet-strong);

  /* —— Motion —— */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* —— Shell / layout (architecture v2 §5–§6) —— */
  /* 1360px left 280px of dead gutter each side at 1920 and 600px at 2560 -
     53% of a wide screen unused. The desk is a dense board; it should fill the
     display it is given, and the column contract below adds tracks instead of
     stretching cards. */
  --shell-max: 2100px;
  --shell-gutter: 28px;
  --shell-gutter-md: 20px;
  --shell-gutter-sm: 16px;
  --shell-header-h: 64px;
  --shell-header-h-phone: 56px;
  --shell-context-h: 36px;
  --shell-context-h-phone: 40px;
  --touch-min: 44px;
  --z-header: 1000;
  --z-overlay: 1100;
  --z-dialog: 1200;
}