/* ─── DESIGN TOKENS ─────────────────────────────────────────────────────────
   abdialamir.com — Azure Dark theme
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg:        #080809;
  --bg-2:      #0c0c0f;
  --bg-3:      #0f1013;
  --surface:   #111115;
  --surface-2: #16161b;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.07);
  --border-mid:   rgba(255, 255, 255, 0.11);
  --border-strong:rgba(255, 255, 255, 0.18);

  /* Azure blue — primary accent */
  --blue:         #3b82f6;
  --blue-bright:  #60a5fa;
  --blue-dim:     rgba(59, 130, 246, 0.12);
  --blue-glow:    rgba(59, 130, 246, 0.25);
  --blue-glow-lg: rgba(59, 130, 246, 0.12);

  /* Purple — AI gradient endpoint */
  --purple:       #7c3aed;
  --purple-bright:#a78bfa;
  --purple-dim:   rgba(124, 58, 237, 0.12);

  /* Amber — Desert Glow highlight */
  --amber:        #f59e0b;
  --amber-bright: #fbbf24;
  --amber-dim:    rgba(245, 158, 11, 0.12);
  --amber-glow:   rgba(245, 158, 11, 0.2);

  /* Text */
  --text-primary:   #f0f0f0;
  --text-secondary: #a1a1aa;
  --text-muted:     #52525b;
  --text-faint:     #3f3f46;

  /* Gradients */
  --grad-primary:  linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  --grad-hero-text:linear-gradient(160deg, #ffffff 0%, rgba(59,130,246,0.65) 100%);
  --grad-card:     linear-gradient(135deg, rgba(59,130,246,0.04) 0%, rgba(124,58,237,0.04) 100%);
  --grad-amber:    linear-gradient(135deg, var(--amber) 0%, #ef4444 100%);

  /* Typography */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Spacing */
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 9999px;

  /* Durations */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;

  /* Easing */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-card: 0 0 0 1px var(--border), 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow-blue: 0 0 30px var(--blue-glow), 0 0 60px var(--blue-glow-lg);
  --shadow-glow-amber: 0 0 20px var(--amber-glow);
}