/* Sapxifi design tokens: the single source of truth for colour, type and spacing */
:root {
  /* Core palette */
  --navy-950: #030A1C;   /* Midnight: darkest surface */
  --navy-900: #05122E;   /* Deep Navy: wordmark, dark surfaces */
  --navy-800: #0B1F45;
  --navy-700: #142B5C;
  --royal-600: #0A2BC9;  /* Royal: X core, deep accent */
  --blue-500: #1E6BFF;   /* Electric Blue: primary accent, links, CTAs */
  --cyan-400: #16D4FF;   /* Signal Cyan */
  --mint-400: #2EE6C0;   /* Aqua Mint */
  --mint-300: #5CF2CF;
  --sky-100: #EAF4FF;    /* Ice: light surfaces */
  --sky-50: #F5FAFF;
  --white: #FFFFFF;
  --slate-600: #4A5878;  /* body text on light */
  --slate-400: #8A97B4;  /* muted text on dark */
  --line-light: #DCE6F5;
  --line-dark: rgba(255,255,255,.12);

  /* Signature gradients */
  --grad-x: linear-gradient(120deg, var(--mint-400) 0%, var(--cyan-400) 35%, var(--blue-500) 65%, var(--royal-600) 100%);
  --grad-text: linear-gradient(100deg, var(--blue-500) 0%, var(--cyan-400) 100%);
  --grad-rule: linear-gradient(90deg, var(--blue-500), var(--mint-400));
  --grad-night: radial-gradient(120% 90% at 75% 30%, #0B2A6B 0%, var(--navy-900) 55%, var(--navy-950) 100%);

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --tracking-tag: .42em;

  /* Shape & motion */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-card: 0 1px 2px rgba(5,18,46,.06), 0 12px 32px -12px rgba(5,18,46,.18);
  --shadow-glow: 0 20px 60px -20px rgba(30,107,255,.55);
  --ease: cubic-bezier(.2,.7,.2,1);
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}