/* ═══════════════════════════════════════
   DESIGN TOKENS — IRFAN HABEEB PORTFOLIO
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root {
  /* ── Color Palette ── */
  --black:       #06060A;
  --surface-0:   #0A0A0F;
  --surface-1:   #111118;
  --surface-2:   #16161F;
  --surface-3:   #1E1E2A;
  --border:      rgba(108, 99, 255, 0.15);
  --border-glow: rgba(108, 99, 255, 0.4);

  /* Signature colors */
  --indigo:      #6C63FF;
  --indigo-dim:  rgba(108, 99, 255, 0.12);
  --indigo-glow: rgba(108, 99, 255, 0.35);
  --acid:        #39FF14;
  --acid-dim:    rgba(57, 255, 20, 0.1);
  --amber:       #FFB347;
  --rose:        #FF6B8A;
  --sky:         #38BDF8;

  /* Text */
  --text-primary:   #E8E8F0;
  --text-secondary: #9090A8;
  --text-muted:     #545468;
  --text-accent:    #6C63FF;

  /* ── Typography ── */
  --font-sans:  'Space Grotesk', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --size-xs:    0.75rem;
  --size-sm:    0.875rem;
  --size-base:  1rem;
  --size-md:    1.125rem;
  --size-lg:    1.375rem;
  --size-xl:    1.75rem;
  --size-2xl:   2.25rem;
  --size-3xl:   3rem;
  --size-4xl:   4rem;
  --size-5xl:   5.5rem;
  --size-6xl:   7rem;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

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

  /* ── Layout ── */
  --max-width: 1280px;
  --nav-width: 64px;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-xslow:  1000ms;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.5);
  --shadow-glow:  0 0 30px rgba(108,99,255,0.2);
  --shadow-acid:  0 0 30px rgba(57,255,20,0.15);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Mode Overrides ── */
[data-mode="recruiter"] {
  --accent:   #6C63FF;
  --accent2:  #FFB347;
}
[data-mode="developer"] {
  --accent:   #39FF14;
  --accent2:  #6C63FF;
}
[data-mode="explorer"] {
  --accent:   #38BDF8;
  --accent2:  #FF6B8A;
}