/* ==========================================================================
   DESIGN TOKENS — Abhishek Kumar Portfolio (Premium Rebuild)
   A restrained, editorial, monochrome-first system with a single confident
   accent. Dark is the default "studio" mode; light is fully supported.
   ========================================================================== */

:root {
  /* ---------- Typography ---------- */
  --font-display: "Bricolage Grotesque", "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Fluid type scale (clamp: min, preferred-vw, max) */
  --fs-display-1: clamp(2.75rem, 2rem + 4.2vw, 7rem);
  --fs-display-2: clamp(2.25rem, 1.6rem + 3.2vw, 5rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
  --fs-h2: clamp(1.65rem, 1.3rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body-lg: clamp(1.05rem, 1rem + 0.2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---------- Spacing (8pt-ish rhythm) ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9rem;

  --section-pad-y: clamp(4.5rem, 4rem + 3vw, 9rem);
  --container-max: 1320px;
  --container-header: 1080px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Motion (see spring-physics guide) ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.7s;

  /* ---------- Z-index scale ---------- */
  --z-cursor: 9999;
  --z-toast: 900;
  --z-modal: 800;
  --z-mobile-nav: 750;
  --z-header: 700;
  --z-overlay: 600;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 0 1px var(--border), 0 20px 60px -20px var(--accent-glow);
}

/* ==========================================================================
   DARK THEME (default)
   A bold ink + acid-lime + signal-red system — deliberately not the
   generic "AI violet gradient" look. High contrast, editorial, loud where
   it counts (accents, hover states) and restrained everywhere else.
   ========================================================================== */
:root,
[data-theme="dark"] {
  --bg: #08090a;
  --bg-raised: #101113;
  --bg-raised-2: #191a1d;
  --bg-inverse: #eef0e2;

  --border: rgba(238, 240, 226, 0.1);
  --border-strong: rgba(238, 240, 226, 0.22);

  --text-primary: #eef0e2;
  --text-secondary: rgba(238, 240, 226, 0.66);
  --text-tertiary: rgba(238, 240, 226, 0.4);
  --text-inverse: #08090a;

  --accent: #d7fb3a;
  --accent-2: #ff4d3d;
  --accent-contrast: #08090a;
  --accent-glow: rgba(215, 251, 58, 0.28);

  --success: #4ade80;
  --danger: #ff4d3d;

  --overlay-scrim: rgba(4, 4, 5, 0.75);
  --noise-opacity: 0.06;
  color-scheme: dark;
}

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */
[data-theme="light"] {
  --bg: #f6f5ee;
  --bg-raised: #ffffff;
  --bg-raised-2: #ebe9dc;
  --bg-inverse: #08090a;

  --border: rgba(8, 9, 10, 0.1);
  --border-strong: rgba(8, 9, 10, 0.18);

  --text-primary: #0c0d0d;
  --text-secondary: rgba(12, 13, 13, 0.66);
  --text-tertiary: rgba(12, 13, 13, 0.42);
  --text-inverse: #eef0e2;

  --accent: #6b8f00;
  --accent-2: #d6331f;
  --accent-contrast: #f6f5ee;
  --accent-glow: rgba(107, 143, 0, 0.18);

  --success: #16a34a;
  --danger: #d6331f;

  --overlay-scrim: rgba(246, 245, 238, 0.8);
  --noise-opacity: 0.03;
  color-scheme: light;
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-base: 0.001s;
    --dur-slow: 0.001s;
  }
}