/*
 * Hive dashboard design tokens (ADR-0018).
 * Source of truth: pkg/dashboard/static/tokens.css. The hub copy in
 * pkg/hub/static/tokens.css is generated from this file and must stay
 * byte-identical.
 *
 * Rule for new styling: no raw colors, font sizes, spacing, radii, or shadow
 * values outside this token layer and documented compatibility aliases. Add a
 * named token here first, then consume the token from page/component CSS.
 *
 * Compatibility aliases below deliberately keep legacy variable names alive so
 * landing this layer causes zero visual change. Only aliases whose old literal
 * value exactly matched the new token value are defined here; known mismatches
 * remain in their page-local styles until a visual migration handles them.
 */
:root {
  color-scheme: dark;

  /* Type */
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  --fs-2xs: .6rem;
  --fs-xs: .68rem;
  --fs-sm: .75rem;
  --fs-base: .82rem;
  --fs-md: .92rem;
  --fs-lg: 1.05rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;

  /* Spacing */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;

  /* Radius and shadows */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* Surfaces, lines, and text */
  --surface-0: #080b0f;
  --surface-1: #0d1218;
  --surface-2: #121922;
  --surface-3: #17212d;
  --surface-terminal: #05070a;
  --line-subtle: color-mix(in srgb, #263545 65%, transparent);
  --line-strong: #263545;
  --text: #f6f8fb;
  --text-muted: #a8b3c2;
  --text-faint: color-mix(in srgb, #a8b3c2 70%, transparent);

  /* Semantic, ACMM, vendor, and overlay colors */
  --brand: #f4c75f;
  --status-ok: #74df9a;
  --status-warn: #d29922;
  --status-attention: #e38b2c;
  --status-error: #ff7e7e;
  --status-info: #80bfff;
  --status-neutral: #a8b3c2;
  --overlay-scrim: rgba(0, 0, 0, 0.55);
  --acmm-level-1: #74df9a;
  --acmm-level-2: #7bd8cd;
  --acmm-level-3: #80bfff;
  --acmm-level-4: #818cf8;
  --acmm-level-5: #c0a6f0;
  --acmm-level-6: #e38b2c;
  --vendor-openai: #10a37f;
  --vendor-anthropic: #d97706;
  --vendor-google: #4285f4;

  /* Component recipe metrics */
  --line-width: 1px;
  --focus-ring-width: 2px;
  --control-min-h: 30px;
  --control-compact-min-h: 22px;
  --btn-pad-y: 7px;
  --btn-pad-x: 16px;
  --btn-sm-pad-y: 3px;
  --btn-sm-pad-x: 9px;
  --badge-min-h: 18px;
  --badge-pad-y: 1px;
  --badge-pad-x: 8px;
  --badge-count-min-w: 18px;
  --status-dot-size: 8px;
  --table-cell-pad-y: 6px;
  --table-cell-pad-x: 8px;
  --empty-state-pad-y: 24px;
  --preview-column-min: 320px;
  --metric-tile-min: 140px;
  --infra-copy-max: 48rem;
  --infra-logo-max-w: 9rem;
  --infra-logo-card-max-w: 24rem;
  --infra-logo-chip-bg: #ffffff;
  --infra-logo-chip-fg: #111827;
  --infra-logo-chip-note-fg: #4b5563;
  --infra-logo-chip-border: #d9e0e8;
  --full-size: 100%;
  --z-sticky: 1;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-control: 1.2;
  --lh-tight: 1.15;
  --tracking-eyebrow: 0.08em;
  --duration-fast: 140ms;
  --duration-status-pulse: 1500ms;
  --opacity-disabled: 0.55;
  --component-status: var(--status-neutral);
  --component-tint-soft: 8%;
  --component-tint: 14%;
  --component-tint-strong: 18%;
  --component-border: 35%;
  --component-border-emphasis: 55%;
  --component-fill-hover: 88%;
  --shadow-status-pulse-rest: 0 0 0 0 color-mix(in srgb, var(--component-status) 0%, transparent);
  --shadow-status-pulse-active: 0 0 0 var(--sp-4) color-mix(in srgb, var(--component-status) 22%, transparent);

  /* Legacy aliases with exact-value matches in today's dark UI. */
  --bg: var(--surface-0);
  --bg-soft: var(--surface-1);
  --panel: var(--surface-2);
  --panel-strong: var(--surface-3);
  --muted: var(--text-muted);
  --line: var(--line-strong);
  --amber: var(--brand);
  --green: var(--status-ok);
  --yellow: var(--status-warn);
  --orange: var(--status-attention);
  --red: var(--status-error);
  --blue: var(--status-info);
  --indigo: var(--acmm-level-4);
  --cyan: var(--acmm-level-2);
  --purple: var(--acmm-level-5);
  --radius-sm: var(--r-sm);
  --radius: var(--r);
  --radius-lg: var(--r-lg);
  --terminal-bg: var(--surface-terminal);
  --terminal-cyan: var(--acmm-level-2);
  --surface: var(--panel);
  --border: var(--line);
  --fg: var(--text);
  --card-bg: var(--panel);
  --accent: var(--blue);
  --oc-accent: var(--red);
  --cc-amber: var(--status-warn);
}

[data-theme="light"],
html.light-mode,
body.light-mode {
  color-scheme: light;
  --surface-0: #f7f8fa;
  --surface-1: #eef1f5;
  --surface-2: #ffffff;
  --surface-3: #f8fafc;
  --surface-terminal: #1d2430;
  --line-subtle: #d9e0e8;
  --line-strong: #aeb9c7;
  --text: #111827;
  --text-muted: #4b5563;
  --text-faint: #64748b;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-raised: 0 4px 16px rgba(15, 23, 42, 0.12);
  --shadow-modal: 0 20px 60px rgba(15, 23, 42, 0.15);
  --overlay-scrim: rgba(17, 24, 39, 0.36);
  --brand: #9a5f0b;
  --status-ok: #16a34a;
  --status-warn: #a16207;
  --status-attention: #c2570f;
  --status-error: #dc2626;
  --status-info: #2563eb;
  --status-neutral: #4b5563;
  --acmm-level-1: #15803d;
  --acmm-level-2: #0f766e;
  --acmm-level-3: #2563eb;
  --acmm-level-4: #4f46e5;
  --acmm-level-5: #7c3aed;
  --acmm-level-6: #c2570f;

  /* Light-mode aliases keep legacy selectors on the dedicated light palette. */
  --bg: var(--surface-0);
  --bg-soft: var(--surface-2);
  --panel: var(--surface-2);
  --panel-strong: var(--surface-1);
  --muted: var(--text-muted);
  --line: var(--line-subtle);
  --amber: var(--brand);
  --green: var(--status-ok);
  --yellow: var(--status-warn);
  --orange: var(--status-attention);
  --red: var(--status-error);
  --blue: var(--status-info);
  --indigo: var(--acmm-level-4);
  --cyan: var(--acmm-level-2);
  --purple: var(--acmm-level-5);
  --terminal-bg: var(--surface-terminal);
  --terminal-cyan: #7bd8cd;
  --surface: var(--panel);
  --border: var(--line);
  --fg: var(--text);
  --card-bg: var(--panel);
  --accent: var(--red);
  --oc-accent: var(--red);
  --cc-amber: var(--status-warn);
}