:root {

  --color-brand-deep:     #020818;
  --color-brand-midnight: #030d2e;
  --color-brand-navy:     #08103a;
  --color-brand-blue:     #1a3a9a;
  --color-brand-glow:     #3c6eff;
  --color-brand-light:    #a0beff;

  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(185, 210, 255, 0.92);
  --color-text-body:      rgba(165, 190, 240, 0.88);
  --color-text-muted:     rgba(140, 170, 230, 0.70);
  --color-text-subtle:    rgba(110, 150, 220, 0.55);
  --color-text-topbar:    rgba(200, 215, 255, 0.75);

  --color-border-glass:   rgba(100, 150, 255, 0.22);
  --color-border-hover:   rgba(120, 170, 255, 0.55);
  --color-border-panel:   rgba(50, 90, 200, 0.25);

  --color-glow-title:     rgba(60, 110, 255, 0.65);
  --color-glow-title-far: rgba(30, 70, 220, 0.30);
  --color-glow-btn:       rgba(60, 100, 255, 0.22);
  --color-shadow-deep:    rgba(0, 0, 50, 0.50);

  --overlay-radial: radial-gradient(ellipse at 60% 40%, rgba(10,25,100,0.22) 0%, transparent 60%);
  --overlay-linear: linear-gradient(to top,
    rgba(2,8,24,0.88) 0%,
    rgba(2,8,24,0.18) 45%,
    transparent 70%
  );

  --font-display: 'Outfit', sans-serif;
  --font-body:    'Outfit', sans-serif;

  --text-xs:   11px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   17px;
  --text-lg:   20px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  48px;

  --transition-fast:   0.2s ease;
  --transition-normal: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow:   0.6s ease;

  --radius-pill: 50px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;

}