/* ============================================================
   METRIDIUM v2 — Design Tokens
   Single source of truth for colors, spacing, typography, etc.
   ============================================================ */

:root {
  /* Color system — deep ocean palette */
  --void: #020308;
  --ink: #070b12;
  --abyss: #050a0e;
  --deep: #030810;
  --chamber: #060c14;
  --chamber-lit: #0a1420;
  --chamber-selected: #0e1a2c;

  --primary: #f2f7ff;
  --secondary: #94e2ff;
  --accent: #61f3ce;
  --muted: rgba(230, 239, 255, 0.78);

  --cyan: #2dd4bf;
  --cyan-bright: #67e8d8;
  --cyan-glow: #5eead4;
  --cyan-dim: rgba(94, 234, 212, 0.35);

  --green: #4ade94;
  --green-glow: rgba(74, 222, 148, 0.6);

  --amber: #fbbf24;
  --amber-deep: #d97706;

  --labs-neon: #4ade94;
  --labs-neon-dim: rgba(74, 222, 148, 0.65);
  --labs-neon-glow: rgba(74, 222, 148, 0.12);
  --labs-accent-warm: #c9a227;
  --labs-accent-copper: #b87333;
  --labs-abyss: #050a0e;
  --labs-deep: #0a1014;
  --labs-glass: rgba(12, 18, 24, 0.75);
  --labs-glass-border: rgba(74, 222, 148, 0.12);
  --labs-metal: rgba(45, 55, 65, 0.6);
  --labs-chrome: linear-gradient(140deg, rgba(74, 222, 148, 0.08), rgba(20, 40, 50, 0.3) 55%, rgba(10, 20, 30, 0.5));
  --labs-brass: linear-gradient(135deg, rgba(201, 162, 39, 0.15), rgba(184, 115, 51, 0.1));

  --white-soft: rgba(255, 255, 255, 0.92);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-35: rgba(255, 255, 255, 0.35);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-04: rgba(255, 255, 255, 0.04);

  --glass: rgba(14, 20, 33, 0.68);
  --glass-border: rgba(255, 255, 255, 0.12);
  --shadow: 0 35px 70px rgba(2, 4, 10, 0.65);
  --chrome: linear-gradient(140deg, rgba(255, 255, 255, 0.65), rgba(117, 142, 181, 0.45) 55%, rgba(25, 49, 78, 0.8));
  --halo: rgba(148, 226, 255, 0.2);

  /* Typography */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Z-index scale */
  --z-base: 0;
  --z-content: 1;
  --z-glow: 2;
  --z-nav: 20;
  --z-hud: 40;
  --z-loader: 30;
  --z-modal: 10000;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.45s;

  /* Marine snow / ambient color stops */
  --snow-color: rgba(200, 220, 240, 0.25);
  --snow-color-deep: rgba(160, 200, 220, 0.15);

  color-scheme: dark;
}