/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — Darshan Karna Portfolio
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --color-bg:         #050505;
  --color-bg-elevated:#0A0A0A;
  --color-bg-card:    #0D0D0D;
  --color-bg-modal:   rgba(0, 0, 0, 0.88);

  --color-text:       #F5F5F5;
  --color-text-muted: #888888;
  --color-text-dim:   #555555;

  --color-accent:     #B8A9E8;
  --color-accent-dim: rgba(184, 169, 232, 0.15);
  --color-accent-glow:rgba(184, 169, 232, 0.25);

  --color-border:     rgba(255, 255, 255, 0.06);
  --color-border-hover:rgba(184, 169, 232, 0.3);

  /* ── Typography ── */
  --font-display:     'Syne', sans-serif;
  --font-body:        'Space Grotesk', sans-serif;

  --fs-hero:          clamp(3.5rem, 8vw, 7.5rem);
  --fs-section-title: clamp(2rem, 4vw, 3.5rem);
  --fs-project-num:   clamp(2.5rem, 5vw, 4.5rem);
  --fs-h3:            clamp(1.25rem, 2vw, 1.75rem);
  --fs-body:          clamp(0.95rem, 1.2vw, 1.1rem);
  --fs-small:         clamp(0.75rem, 0.9vw, 0.85rem);
  --fs-tag:           0.7rem;
  --fs-nav:           0.85rem;

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  --lh-tight:         1.1;
  --lh-snug:          1.3;
  --lh-normal:        1.6;

  --ls-tight:        -0.02em;
  --ls-normal:        0;
  --ls-wide:          0.08em;
  --ls-ultra:         0.15em;

  /* ── Spacing ── */
  --space-xs:         0.5rem;
  --space-sm:         1rem;
  --space-md:         1.5rem;
  --space-lg:         2.5rem;
  --space-xl:         4rem;
  --space-2xl:        6rem;
  --space-3xl:        10rem;

  --container-max:    1280px;
  --container-padding:clamp(1.5rem, 4vw, 4rem);

  /* ── Radius ── */
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-full:      9999px;

  /* ── Transitions ── */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:    0.2s;
  --duration-normal:  0.4s;
  --duration-slow:    0.7s;
  --duration-loader:  2.5s;

  /* ── Z-Index Scale ── */
  --z-base:           1;
  --z-nav:            100;
  --z-sidebar:        90;
  --z-modal:          500;
  --z-loader:         9999;
}