/* ============================================================
   DESIGN TOKENS — Elizabeth Lin
   Aesthetic: Editorial Luxury × cinematic deep-espresso
   ============================================================ */

:root {
  /* ---- Color — neutral black/white, OOAD-influenced clean alternation ---- */
  --c-bg:        #0A0A0A;   /* near-pure black */
  --c-bg-elev:   #161616;   /* one step up — cards, panels */
  --c-bg-soft:   #1E1E1E;   /* hairline-elevated surfaces */
  --c-ink:       #FAFAFA;   /* near-pure white — primary foreground */
  --c-ink-2:     #C7C7C7;
  --c-ink-mute:  #8B8B8B;
  --c-ink-dim:   #555555;
  --c-line:      rgba(250, 250, 250, 0.10);
  --c-line-hi:   rgba(250, 250, 250, 0.18);
  --c-paper:     #F2F2EF;   /* grey-white paper used for light sections */
  --c-paper-soft:#E8E8E4;

  /* Single accent — used sparingly */
  --c-accent:    #D01818;   /* true red */
  --c-accent-hi: #ED2A2A;

  /* ---- Type families — Satoshi (Fontshare) for everything sans,
     Geist Mono for metadata/eyebrows. ---- */
  --ff-display:  "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body:     "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono:     "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights — mapped to Satoshi's available range (300/400/500/700/900) ---- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semi:      500;     /* Satoshi has no 600 — alias to medium */
  --fw-bold:      700;
  --fw-black:     900;

  /* ---- Type scale (fluid clamp) — sans needs slightly smaller display ---- */
  --fz-hero:     clamp(3.5rem, 11vw, 10rem);
  --fz-display:  clamp(2.75rem, 7.5vw, 7rem);
  --fz-h1:       clamp(2rem, 4.8vw, 4rem);
  --fz-h2:       clamp(1.625rem, 3vw, 2.5rem);
  --fz-h3:       clamp(1.125rem, 1.6vw, 1.375rem);
  --fz-lead:     clamp(1.0625rem, 1.25vw, 1.25rem);
  --fz-body:     1rem;
  --fz-sm:       0.875rem;
  --fz-xs:       0.75rem;
  --fz-mono:     0.6875rem;   /* metadata labels */

  /* ---- Line-height ---- */
  --lh-tight:    0.95;
  --lh-snug:     1.1;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  /* ---- Spacing — 4px base ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;
  --sp-12: 16rem;

  /* ---- Layout ---- */
  --max-w:      1640px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);

  /* ---- Vertical rhythm — canonical spacing tokens.
     Use these for section padding and large vertical gaps so every
     page shares the same rhythm. ---- */
  --space-nav-offset:    clamp(6.5rem, 12vw, 10rem);  /* below the floating nav */
  --space-section:       clamp(var(--sp-7), 7vw, var(--sp-9));
  --space-section-lg:    clamp(var(--sp-8), 9vw, var(--sp-10));
  --space-section-sm:    clamp(var(--sp-6), 5vw, var(--sp-8));
  --space-hero-bottom:   clamp(var(--sp-7), 7vw, var(--sp-9));

  --radius-xs:  2px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  /* ---- Motion — cinematic eases ---- */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quart:   cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring:     cubic-bezier(0.32, 0.72, 0, 1);

  --dur-instant: 120ms;
  --dur-micro:   200ms;
  --dur-std:     320ms;
  --dur-page:    480ms;
  --dur-cinema:  720ms;

  /* ---- Type tracking — sans display benefits from tighter tracking ---- */
  --tr-display:  -0.04em;
  --tr-tight:    -0.02em;
  --tr-normal:   0;
  --tr-eyebrow:  0.16em;
  --tr-mono:     0.04em;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-micro:   0ms;
    --dur-std:     0ms;
    --dur-page:    0ms;
    --dur-cinema:  0ms;
  }
}