:root {
  /* ---- Brand color ---- */
  --near-black: #050505;
  --navy: #06183D;
  --navy-deep: #030c22;
  --blue: #126BFF;
  --blue-electric: #2563EB;
  --accent: #4338FF;
  --white: #FFFFFF;
  --light-bg: #F7F9FC;

  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, 0.72);
  --ink-faint: rgba(255, 255, 255, 0.48);
  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);

  --ink-on-light: #06183D;
  --ink-on-light-soft: rgba(6, 24, 61, 0.68);
  --line-on-light: rgba(6, 24, 61, 0.12);

  --grad-signal: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%);
  --grad-wash: radial-gradient(80% 60% at 85% 10%, rgba(18, 107, 255, 0.20) 0%, rgba(18, 107, 255, 0) 60%),
               radial-gradient(60% 50% at 10% 100%, rgba(67, 56, 255, 0.16) 0%, rgba(67, 56, 255, 0) 60%);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: clamp(1.9rem, 1.6rem + 1.4vw, 2.75rem);
  --fs-3xl: clamp(2.4rem, 1.9rem + 2.4vw, 3.75rem);
  --fs-4xl: clamp(3rem, 2.2rem + 3.8vw, 5.25rem);

  /* ---- Spacing (8px system) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --sp-9: 8rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-glow: 0 0 0 1px rgba(18, 107, 255, 0.25), 0 20px 60px -20px rgba(18, 107, 255, 0.45);
  --shadow-card: 0 20px 50px -30px rgba(0, 0, 0, 0.6);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;

  --container: 1240px;
}