/* ============================================================
   ADAMS OMONDI — DESIGN TOKENS
   Dark mode primary · Light mode opt-in via [data-theme="light"]
   ============================================================ */

:root {
  /* ---------- Brand palette ---------- */
  --brand-primary:        #00d4ff;   /* electric cyan */
  --brand-primary-hover:  #33ddff;
  --brand-primary-soft:   rgba(0, 212, 255, 0.12);
  --brand-secondary:      #7c3aed;   /* violet */
  --brand-secondary-soft: rgba(124, 58, 237, 0.14);
  --brand-tertiary:       #10b981;   /* emerald */
  --brand-warning:        #f59e0b;
  --brand-danger:         #ef4444;
  --brand-success:        #10b981;

  /* ---------- Dark theme (default) ---------- */
  --bg-base:       #05070f;
  --bg-surface:    #0a0e1a;
  --bg-elevated:   #111623;
  --bg-hover:      #161c2c;
  --bg-overlay:    rgba(5, 7, 15, 0.72);
  --bg-code:       #0d1220;

  --text-primary:   #f4f6fb;
  --text-secondary: #a4adc4;
  --text-muted:     #6b7590;
  --text-inverse:   #05070f;

  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.20);

  --glass-bg:     rgba(255,255,255,0.035);
  --glass-border: rgba(255,255,255,0.08);
  --glass-hover:  rgba(255,255,255,0.055);

  --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  --gradient-hero:    radial-gradient(1200px 600px at 20% 0%, rgba(0,212,255,0.12), transparent 60%),
                      radial-gradient(1000px 500px at 90% 30%, rgba(124,58,237,0.14), transparent 55%),
                      var(--bg-base);
  --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
  --gradient-text:    linear-gradient(120deg, #f4f6fb 0%, #00d4ff 55%, #7c3aed 100%);

  /* ---------- Shadows ---------- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.30);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.42);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 40px rgba(0,212,255,0.22);
  --shadow-glow-violet: 0 0 40px rgba(124,58,237,0.25);

  /* ---------- Typography ---------- */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---------- Radii ---------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-slower: 700ms;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-wide: 1440px;
  --container-pad: 1.25rem;
  --nav-height: 72px;

  /* ---------- Z-index scale ---------- */
  --z-bg:        -1;
  --z-base:       1;
  --z-navbar:     100;
  --z-mobile-nav: 200;
  --z-dropdown:   300;
  --z-modal:      400;
  --z-toast:      500;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg-base:       #f7f9fc;
  --bg-surface:    #ffffff;
  --bg-elevated:   #f0f3f8;
  --bg-hover:      #e7ecf4;
  --bg-overlay:    rgba(247, 249, 252, 0.82);
  --bg-code:       #f0f3f8;

  --text-primary:   #0a0e1a;
  --text-secondary: #4a5568;
  --text-muted:     #718096;
  --text-inverse:   #ffffff;

  --border-subtle:  rgba(10, 14, 26, 0.06);
  --border-default: rgba(10, 14, 26, 0.10);
  --border-strong:  rgba(10, 14, 26, 0.20);

  --glass-bg:     rgba(255,255,255,0.65);
  --glass-border: rgba(10, 14, 26, 0.08);
  --glass-hover:  rgba(255,255,255,0.85);

  --shadow-xs:   0 1px 2px rgba(10,14,26,0.06);
  --shadow-sm:   0 2px 8px rgba(10,14,26,0.08);
  --shadow-md:   0 8px 24px rgba(10,14,26,0.10);
  --shadow-lg:   0 24px 60px rgba(10,14,26,0.14);
  --shadow-glow: 0 0 40px rgba(0,212,255,0.30);

  --gradient-hero: radial-gradient(1200px 600px at 20% 0%, rgba(0,212,255,0.10), transparent 60%),
                   radial-gradient(1000px 500px at 90% 30%, rgba(124,58,237,0.10), transparent 55%),
                   var(--bg-base);
  --gradient-text: linear-gradient(120deg, #0a0e1a 0%, #0091c2 55%, #6d28d9 100%);
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 820px; }

@media (min-width: 768px) {
  :root { --container-pad: 2rem; --nav-height: 80px; }
}