:root {
  /* Core surfaces */
  --bg:               #0B0F14;   /* Midnight black / deep charcoal */
  --bg-depth:         #0F172A;   /* Dark navy */
  --bg-lift:          #131a26;   /* Mid-tone surface (between core + navy) */
  --bg-lift-low:      rgba(15, 23, 42, 0.55);
  --bg-glass:         rgba(11, 15, 20, 0.6);

  /* Ink */
  --ink-100:          #F8FAFC;   /* Off-white */
  --ink-88:           rgba(248, 250, 252, 0.88);
  --ink-64:           rgba(248, 250, 252, 0.64);
  --ink-48:           rgba(248, 250, 252, 0.48);
  --ink-32:           rgba(248, 250, 252, 0.32);
  --ink-16:           rgba(248, 250, 252, 0.16);
  --ink-8:            rgba(248, 250, 252, 0.08);
  --ink-4:            rgba(248, 250, 252, 0.04);

  /* AI signal — electric blue primary */
  --signal:           #3B82F6;   /* Electric blue (primary CTA / brand) */
  --signal-bright:    #60A5FA;   /* Hover */
  --signal-deep:      #1E40AF;   /* Pressed / shadow */
  --signal-glow:      rgba(59, 130, 246, 0.18);
  --signal-halo:      rgba(59, 130, 246, 0.32);

  /* Cyan glow — secondary AI accent */
  --glow:             #22D3EE;   /* Soft cyan */
  --glow-soft:        rgba(34, 211, 238, 0.32);
  --glow-faint:       rgba(34, 211, 238, 0.12);

  /* Muted gold — accent only (premium tier badges, hover whispers) */
  --gold:             #C9A86A;
  --gold-soft:        rgba(201, 168, 106, 0.32);

  /* Status (used sparingly) */
  --success:          #10B981;
  --warning:          #F59E0B;
  --danger:           #EF4444;

  /* Typography */
  --font-sans:        "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:       "Instrument Serif", Georgia, "Times New Roman", serif;

  --w-thin:           100;
  --w-normal:         400;
  --w-medium:         500;
  --w-semi:           600;
  --w-bold:           700;

  /* Spacing — Aluro scale */
  --s-0:              0;
  --s-4:              4px;
  --s-8:              8px;
  --s-12:             12px;
  --s-16:             16px;
  --s-20:             20px;
  --s-24:             24px;
  --s-32:             32px;
  --s-48:             48px;
  --s-64:             64px;
  --s-80:             80px;
  --s-120:            120px;

  /* Radius */
  --r-sm:             8px;
  --r-md:             12px;
  --r-lg:             24px;
  --r-pill:           100vw;

  /* Containers */
  --container-sm:     1080px;
  --container-md:     1280px;
  --container-lg:     1800px;

  /* Shadows */
  --shadow-soft:      0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow:      0 0 60px var(--signal-halo);
  --shadow-cyan:      0 0 80px var(--glow-soft);
  --shadow-deep:      0 40px 80px rgba(0, 0, 0, 0.7);

  /* Motion */
  --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:         180ms;
  --dur-mid:          320ms;
  --dur-slow:         600ms;
}

@media (max-width: 768px) {
  :root {
    --s-120: 80px;
    --s-80:  56px;
    --s-64:  48px;
    --s-48:  32px;
  }
}