/* ==========================================================================
   Spectra Packet Design Tokens — single source of truth (P0)
   Spec: spectra-new-design.md §2. Loaded BEFORE styles.css.
   Legacy Fluent-era variable names are aliased to the new palette so the
   existing stylesheet re-skins without mass edits. Do not hardcode colors
   outside this file going forward.
   ========================================================================== */

:root {
  /* ---- Color · brand ---------------------------------------------------- */
  --color-primary: #1a56db;
  --color-primary-hover: #1e40af;
  --color-primary-active: #173da0;
  --color-primary-subtle: #eff4ff;
  /* Wave teal — BRAND ACCENT ONLY (active nav indicator, logo). Never state. */
  --accent-teal: #0891b2;

  /* ---- Color · semantic states ------------------------------------------ */
  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-info: #0891b2;
  --color-info-bg: #ecfeff;

  /* ---- Risk palette (topology, MITRE matrix, badges) ---------------------- */
  --pal-critical: #d13438;
  --pal-high: #ff8c00;
  --pal-medium: #ffb900;
  --pal-low: #1a56db;

  /* ---- Color · neutrals (slate ramp) ------------------------------------ */
  --color-bg: #f1f5f9;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-row-hover: #f8fafc;

  /* ---- Legacy aliases (old styles.css names → new palette) -------------- */
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --text: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-active: var(--color-primary-active);
  --success: var(--color-success);
  --danger: var(--color-error);
  --danger-bg: var(--color-error-bg);
  --warn: var(--color-warning);
  --info: var(--color-info);
  --info-bg: var(--color-info-bg);
  --warn-yellow: #b45309;
  --warn-yellow-bg: #fef3c7;
  --warn-bg: #ffedd5;
  --neutral-10: #f8fafc;
  --neutral-20: #f1f5f9;
  --neutral-40: var(--color-border);
  --neutral-60: var(--color-border-strong);
  --neutral-80: #64748b;

  /* ---- Typography -------------------------------------------------------- */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, system-ui, sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --line-height-heading: 1.4;
  --line-height-body: 1.6;
  --letter-spacing-heading: -0.01em;

  /* ---- Spacing (8px grid) ------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  /* Status chips are the ONLY pill-shaped elements (grandfathered). */
  --radius-pill: 999px;

  /* ---- Elevation ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 4px 8px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-4: 0 8px 16px rgba(15, 23, 42, 0.10), 0 16px 48px rgba(15, 23, 42, 0.14);

  /* ---- Motion ------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout -------------------------------------------------------------- */
  --header-height: 56px;
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 64px;
  --focus-ring-color: var(--color-primary);

  /* ---- Legacy motion aliases ------------------------------------------------ */
  --duration-enter: var(--duration-normal);
  --duration-exit: var(--duration-fast);
  --ease-out-cubic: var(--ease-standard);
  --ease-in-cubic: var(--ease-standard);
}

/* ---- Dark theme stub — populated in Phase 2 ------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0b1220;
  --color-surface: #111a2c;
  --color-text: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #64748b;
  --color-border: #26334d;
  --color-border-strong: #33415c;
  --color-row-hover: #16213a;
  --color-primary-subtle: #172554;
  --color-success-bg: #052e22;
  --color-warning-bg: #291a02;
  --color-error-bg: #2d0b0d;
  --color-info-bg: #083344;
  --pal-critical: #f87171;
  --pal-high: #fb923c;
  --pal-medium: #fbbf24;
  --pal-low: #60a5fa;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-4: 0 8px 24px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}