:root {
  /* Backgrounds */
  --navy-950: #030f27;
  --navy-900: #060f28;
  --navy-800: #0a1a3a;
  --navy-700: #0f2147;

  /* Brand Accents */
  --blue-500:   #2a5caa;
  --blue-400:   #3a72d0;
  --blue-300:   #6b8cdf;
  --blue-200:   #93b4ee;
  --purple-500: #4a3bc4;
  --purple-400: #5243d6;
  --cyan-400:   #60b8e8;

  /* Text */
  --text-primary:   #e8edf5;
  --text-secondary: #8fa3c0;
  --text-muted:     #4a6080;

  /* Borders */
  --border:        rgba(106,140,223,0.15);
  --border-bright: rgba(106,140,223,0.30);

  /* Gradients */
  --gradient-brand:     linear-gradient(135deg, var(--blue-500), var(--purple-500));
  --gradient-accent:    linear-gradient(135deg, var(--blue-300), var(--purple-400));
  --gradient-hero-glow: radial-gradient(ellipse 60% 70% at 70% 50%, rgba(82,67,214,0.12) 0%, transparent 70%);

  /* Type Scale */
  --text-xs:   0.72rem;
  --text-sm:   0.82rem;
  --text-base: 1rem;
  --text-lg:   1.1rem;
  --text-xl:   1.4rem;
  --text-2xl:  2.2rem;
  --text-3xl:  3.0rem;
  --text-hero: 3.8rem;

  /* Spacing */
  --max-width:      1200px;
  --section-pad-v:  5rem;
  --section-pad-h:  3rem;
  --card-pad:       2rem;
  --radius:         4px;
}

@media (max-width: 767px) {
  :root {
    --section-pad-v: 3rem;
    --section-pad-h: 1.5rem;
    --text-hero: 2.4rem;
    --text-3xl:  2rem;
    --text-2xl:  1.7rem;
  }
}