/* ==========================================================================
   DESIGN TOKENS — Caden S. Turnquest portfolio
   Palette: deep charcoal (from the headshot's studio backdrop) + restrained
   antique gold (echoes the book series without copying it) + warm paper.
   Type: Fraunces (display/editorial) + IBM Plex Sans (body/UI) + IBM Plex
   Mono (data, dates, tech tags — the "technical" register).
   ========================================================================== */

:root {
  /* ---- Color: dark surfaces ---- */
  --ink:        #15171c;   /* primary dark surface */
  --ink-2:      #1d2027;   /* elevated dark surface (cards on dark) */
  --ink-3:      #262a33;   /* hairline / border on dark */
  --ink-text:   #f3f1ec;   /* primary text on dark */
  --ink-text-muted: #9a9ea8; /* secondary text on dark */

  /* ---- Color: light surfaces ---- */
  --paper:      #f6f4ef;   /* primary light surface */
  --paper-2:    #ece9e1;   /* elevated light surface (cards on paper) */
  --paper-3:    #dcd8cd;   /* hairline / border on paper */
  --paper-text: #1a1b1f;   /* primary text on paper */
  --paper-text-muted: #5c5e64; /* secondary text on paper */

  /* ---- Color: accent (used sparingly — see frontend-design skill: "spend
     boldness in one place") ---- */
  --gold:        #b4922f;
  --gold-bright: #d9b856;
  --gold-dim:    #7c672a;

  /* ---- Semantic ---- */
  --focus-ring:  #6fb8ff;

  /* ---- Type families ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (fluid) ---- */
  --fs-hero:   clamp(2.6rem, 3.2vw + 1.6rem, 5.2rem);
  --fs-h1:     clamp(2.1rem, 1.6vw + 1.5rem, 3.2rem);
  --fs-h2:     clamp(1.6rem, 1vw + 1.2rem, 2.25rem);
  --fs-h3:     clamp(1.2rem, 0.4vw + 1.05rem, 1.5rem);
  --fs-lead:   clamp(1.05rem, 0.3vw + 0.95rem, 1.25rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  /* ---- Spacing scale ---- */
  --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: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 3px;
  --radius-md: 6px;
  --spine-w: 1px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; }
}