:root {
  /* === Brand Colors === */
  --c-bg-dark:       #080f1a;
  --c-bg-dark2:      #0d1b2a;
  --c-bg-light:      #f4f7fb;
  --c-bg-white:      #ffffff;
  --c-cyan:          #00d4ff;
  --c-teal:          #0fb8a0;
  --c-blue:          #3498db;
  --c-navy:          #1e3a5f;
  --c-text-dark:     #0f172a;
  --c-text-body:     #475569;
  --c-text-muted:    #94a3b8;
  --c-text-light:    rgba(255, 255, 255, 0.88);
  --c-text-dim:      rgba(255, 255, 255, 0.5);
  --c-border:        #e2e8f0;
  --c-border-dark:   rgba(0, 212, 255, 0.12);

  /* === Spacing Scale (8-based) === */
  --sp-1: 8px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;

  /* === Border Radius === */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* === Shadows === */
  --sh-sm:   0 2px 8px rgba(0, 0, 0, 0.06);
  --sh-md:   0 4px 20px rgba(0, 0, 0, 0.09);
  --sh-lg:   0 8px 36px rgba(0, 0, 0, 0.13);
  --sh-xl:   0 16px 52px rgba(0, 0, 0, 0.17);
  --sh-glow: 0 0 32px rgba(0, 212, 255, 0.18);

  /* === Typography === */
  --font: 'Poppins', sans-serif;

  /* === Transitions === */
  --t-fast: 0.15s ease;
  --t-base: 0.3s ease;
  --t-slow: 0.5s ease;

  /* === Layout === */
  --container: 1200px;
  --nav-h: 68px;

  /* === Z-index scale === */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-modal:   200;
  --z-assist:  300;
}