:root {
  /* Backgrounds */
  --bg-primary:      #08080E;
  --bg-secondary:    #10101A;
  --bg-tertiary:     #18182A;
  --bg-quaternary:   #21213A;

  /* Accent */
  --accent:          #1A65FF;
  --accent-light:    #5090FF;
  --accent-glow:     rgba(26, 101, 255, 0.28);

  /* Semantic */
  --success:         #22c55e;
  --danger:          #f43f5e;
  --warning:         #f59e0b;
  --info:            #0ea5e9;

  /* Text */
  --text-primary:    #EFEFFF;
  --text-secondary:  rgba(239, 239, 255, 0.55);
  --text-tertiary:   rgba(239, 239, 255, 0.28);

  /* Border */
  --border:          rgba(58, 58, 106, 0.30);
  --border-accent:   rgba(26, 101, 255, 0.40);

  /* Surfaces */
  --surface-highlight: rgba(255, 255, 255, 0.055);

  /* Hero */
  --hero-from:       #0D1A2E;
  --hero-to:         #0A0F1E;

  /* Typography */
  --font:            'Inter', sans-serif;

  /* Radius */
  --r-xs:   6px;
  --r-sm:   12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Spacing (4/8pt grid) */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
}