/* ============================================
   DESIGN TOKENS — Dipak Shrestha Portfolio
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-bg:          #0a0a0f;
  --color-bg-elevated: #12121a;
  --color-bg-card:     #16161f;
  --color-bg-card-hover:#1c1c28;
  --color-surface:     #1e1e2a;
  --color-border:      rgba(255, 255, 255, 0.06);
  --color-border-hover:rgba(255, 255, 255, 0.12);

  --color-text:        #e8e8ed;
  --color-text-muted:  #8a8a9a;
  --color-text-dim:    #828299;

  --color-accent:      #3b82f6;
  --color-accent-light:#60a5fa;
  --color-accent-dark: #2563eb;
  --color-accent-glow: rgba(59, 130, 246, 0.15);
  --color-accent-glow-strong: rgba(59, 130, 246, 0.25);

  --color-green:       #10b981;
  --color-green-dim:   rgba(16, 185, 129, 0.12);
  --color-cyan:        #06b6d4;
  --color-cyan-dim:    rgba(6, 182, 212, 0.12);

  --color-white:       #ffffff;
  --color-black:       #000000;

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

  --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;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.1em;

  /* ---- 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 ---- */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 800px;
  --section-padding: clamp(4rem, 8vw, 7rem);

  /* ---- Borders ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.4);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow:0 0 30px var(--color-accent-glow);
  --shadow-glow-strong: 0 0 60px var(--color-accent-glow-strong);

  /* ---- Transitions ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower:800ms;

  /* ---- Z-Index ---- */
  --z-base:    1;
  --z-dropdown:10;
  --z-sticky:  50;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}