/* ─────────────────────────────────────────────
   tokens.css — Design Tokens
   All design decisions in one place.
   Edit here to retheme the entire site.
──────────────────────────────────────────────── */

:root {

  /* ── Colors ── */
  --clr-bg:          #FFFFFF;
  --clr-surface:     #F5F5F7;
  --clr-surface-2:   #EBEBF0;
  --clr-ink:         #1D1D1F;
  --clr-ink-2:       #6E6E73;
  --clr-ink-3:       #AEAEB2;
  --clr-border:      #D2D2D7;
  --clr-accent-warm: #F2C94C; /* project accent — timeline track, subtitle bars */

  /* Project card placeholder gradients — keyed by project slug */
  --clr-card-01:                 linear-gradient(145deg, #F0EDE8 0%, #E5E0D8 100%);
  --clr-card-skyline-physicians: linear-gradient(145deg, #E8EDF2 0%, #D8E3EC 100%);
  --clr-card-parentpal:          linear-gradient(145deg, #EDE8E3 0%, #E0D9D0 100%);
  --clr-card-stage:              linear-gradient(145deg, #E5EDEA 0%, #D8E5DF 100%);

  /* Profile photo fallback */
  --clr-photo-bg:    linear-gradient(145deg, #EEE9E3 0%, #E3DDD5 100%);

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

  /* ── Spacing (8px base unit) ── */
  --sp-1:   8px;
  --sp-2:   16px;
  --sp-3:   24px;
  --sp-4:   32px;
  --sp-5:   48px;
  --sp-6:   64px;
  --sp-8:   128px;

  /* ── Radii ── */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);

  /* ── Easing ── */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.45, 0.00, 0.55, 1.00);

  /* ── Timing ── */
  --t-fast:    0.15s;
  --t-base:    0.30s;
  --t-slow:    0.60s;
  --t-reveal:  0.65s;

  /* ── Layout ── */
  --nav-h:    68px;
  --max-w:    1200px;
  --gutter:   clamp(24px, 5vw, 80px);
}