/* ============================================================
 * tokens.css — Listener Dashboard design tokens
 * Industrial instrumentation aesthetic. All values flow from here.
 * ============================================================ */

:root {
  /* ---------- Color: steel & charcoal base ---------- */
  --color-steel-950: #0f1419;   /* deepest, used for body text on light */
  --color-steel-900: #1c2128;
  --color-steel-800: #2a313a;
  --color-steel-700: #3d4651;
  --color-steel-600: #5a6470;
  --color-steel-500: #8a95a3;
  --color-steel-400: #c5cbd3;
  --color-steel-300: #e8ebef;
  --color-steel-200: #eef1f5;
  --color-steel-100: #f5f7fa;
  --color-surface:   #ffffff;
  --color-paper:     #fafbfc;   /* page background — paper-pale steel */

  /* ---------- Color: brass / copper accent ---------- */
  --color-brass-700: #7a5828;
  --color-brass-600: #9c6f3a;
  --color-brass-500: #b8864a;   /* primary action */
  --color-brass-400: #c89762;
  --color-brass-300: #d9b48a;
  --color-brass-100: #f4e8d6;

  /* ---------- Color: electric blue — selected & live ---------- */
  --color-electric-700: #1a7fd6;
  --color-electric-500: #3b9eff;
  --color-electric-300: #5ab4ff;
  --color-electric-glow: rgba(90, 180, 255, 0.30);
  --color-electric-bloom: rgba(59, 158, 255, 0.18);

  /* ---------- Color: status ---------- */
  --color-status-healthy: #3fb950;
  --color-status-degraded: #d29922;
  --color-status-dead:    #f85149;
  --color-status-healthy-soft: rgba(63, 185, 80, 0.16);
  --color-status-degraded-soft: rgba(210, 153, 34, 0.18);
  --color-status-dead-soft: rgba(248, 81, 73, 0.16);

  /* ---------- Semantic aliases ---------- */
  --color-bg:           var(--color-paper);
  --color-surface-1:    var(--color-surface);
  --color-surface-2:    var(--color-steel-100);
  --color-border:       var(--color-steel-300);
  --color-border-strong: var(--color-steel-400);
  --color-rule:         var(--color-steel-300);
  --color-text:         var(--color-steel-950);
  --color-text-soft:    var(--color-steel-700);
  --color-text-muted:   var(--color-steel-500);
  --color-text-inverse: var(--color-steel-100);
  --color-accent:       var(--color-brass-500);
  --color-accent-strong: var(--color-brass-600);
  --color-live:         var(--color-electric-500);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Inter", system-ui, sans-serif;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;   /* for KICKER / SECTION labels */

  /* ---------- Spacing scale ---------- */
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* ---------- Radii ---------- */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--color-border);
  --border-rule:     1px solid var(--color-rule);
  --border-strong:   1px solid var(--color-border-strong);
  --border-pipe:     1px solid var(--color-steel-400);

  /* ---------- Shadows ---------- */
  --shadow-inset-pipe: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(15,20,25,0.06);
  --shadow-card:       0 1px 0 var(--color-steel-200), 0 1px 2px rgba(15,20,25,0.04);
  --shadow-card-hover: 0 2px 0 var(--color-steel-200), 0 4px 12px rgba(15,20,25,0.07);
  --shadow-port-glow:  0 0 0 1px var(--color-electric-500), 0 0 14px var(--color-electric-glow);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-particle: 4800ms;

  /* ---------- z-index ---------- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;

  /* ---------- Layout ---------- */
  --page-max: 1320px;
  --gutter:   var(--space-32);
  --header-h: 64px;
}