/* =============================================================
   DESIGN TOKENS — "Signal Lab" engineering / blueprint system
   ============================================================= */

:root {
  /* ---------- Surfaces ---------- */
  --color-bg: #060a12;
  --color-bg-alt: #080d18;
  --color-surface: #0d1422;
  --color-surface-2: #121b2e;
  --color-surface-3: #182338;
  --color-border: rgba(150, 200, 225, 0.10);
  --color-border-strong: rgba(150, 210, 230, 0.22);
  --color-border-accent: rgba(45, 230, 214, 0.35);

  /* ---------- Accents ---------- */
  --color-cyan: #2ee6d6;
  --color-cyan-bright: #7bf6ea;
  --color-cyan-dim: rgba(46, 230, 214, 0.14);
  --color-amber: #ffb454;
  --color-amber-bright: #ffd29b;
  --color-amber-dim: rgba(255, 180, 84, 0.14);
  --color-violet: #b48bff;
  --color-violet-dim: rgba(180, 139, 255, 0.14);
  --color-red-signal: #ff6b6b;
  --color-green-signal: #6dffb0;

  /* ---------- Text ---------- */
  --color-text: #eaf2fb;
  --color-text-muted: #93a4c0;
  --color-text-dim: #5b6a85;
  --color-text-on-accent: #06121b;

  /* ---------- Typography ---------- */
  --font-display: "Chakra Petch", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  --fs-display-xl: clamp(2.75rem, 7vw, 6.5rem);
  --fs-display-l: clamp(2.25rem, 5vw, 4.25rem);
  --fs-display-m: clamp(1.75rem, 3.4vw, 2.75rem);
  --fs-display-s: clamp(1.35rem, 2.4vw, 1.85rem);
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-body-s: 0.875rem;
  --fs-mono-s: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.65;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- Shape ---------- */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 76px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 320ms;
  --dur-slow: 650ms;

  /* ---------- Effects ---------- */
  --glow-cyan: 0 0 24px rgba(46, 230, 214, 0.35);
  --glow-amber: 0 0 24px rgba(255, 180, 84, 0.3);
  --shadow-card: 0 20px 50px -25px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 30px 60px -30px rgba(0, 0, 0, 0.75);

  /* ---------- Grid background ---------- */
  --grid-line: rgba(150, 200, 225, 0.05);
  --grid-size: 64px;

  /* ---------- Z-index scale ---------- */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-overlay: 200;
}