/* ============================================================
   DESIGN TOKENS
   Single source of truth for the portfolio's visual system.
   Change the palette here and the whole site follows.
   ============================================================ */

:root {
  /* --- Palette --- */
  --c-bg: #E4E4E4;
  --c-dark: #111111;
  --c-deep: #0B0B0B;
  --c-warm: #F4F1E8;
  --c-accent: #75C5DE;
  --c-muted: #9A9590;

  /* Derived surfaces (kept as tokens so a palette swap stays coherent) */
  --c-bg-raised: #EDEDED;
  --c-bg-pale: #E8F1F5;
  --c-line: rgba(17, 17, 17, 0.14);
  --c-line-strong: rgba(17, 17, 17, 0.28);
  --c-panel: rgba(17, 17, 17, 0.95);
  --c-on-dark-muted: #9A9590;

  /* --- Typography --- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid scale. Every size is viewport-aware so nothing needs per-breakpoint overrides. */
  --fs-display: clamp(4rem, 13vw, 13rem);
  --fs-h1: clamp(2.5rem, 7vw, 6rem);
  --fs-h2: clamp(2rem, 5.2vw, 4.25rem);
  --fs-h3: clamp(1.5rem, 3vw, 2.5rem);
  --fs-lead: clamp(1.25rem, 2.1vw, 1.75rem);
  --fs-body: clamp(1rem, 1.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-meta: 0.75rem;

  --lh-tight: 0.86;
  --lh-snug: 1.08;
  --lh-normal: 1.2;
  --lh-body: 1.6;

  --ls-display: -0.04em;
  --ls-heading: -0.025em;
  --ls-meta: 0.14em;

  /* --- Spacing --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;
  --section-y: clamp(5rem, 12vw, 11rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --max-w: 1600px;

  /* --- Motion --- */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-mid: 0.5s;
  --dur-slow: 0.8s;

  /* --- Elevation --- */
  --shadow-soft: 0 18px 40px -22px rgba(17, 17, 17, 0.45);
  --shadow-card: 0 30px 60px -30px rgba(17, 17, 17, 0.55);
  --shadow-lift: 0 44px 80px -34px rgba(17, 17, 17, 0.6);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  /* --- Layering --- */
  --z-splash: 9999;
  --z-nav: 60;
  --z-menu: 55;
  --z-hero-content: 8;
}