/* ==========================================================================
   TOKENS — the single source of truth. Every other file in /styles reads
   from here. Nothing in base/layout/components should hardcode a color,
   font-size, or spacing value — reference a token instead.
   ========================================================================== */

:root{
  /* ---- Color ---- */
  --bg:            #F4F7FB;
  --bg-alt:        #E7EEF7;
  --surface:       #FFFFFF;
  --ink:           #0F1D33;
  --ink-soft:      #2d394f;
  --ink-faint:     #8996AC;
  --line:          #D7E0EC;
  --accent:        #1F52D6;
  --accent-ink:    #FFFFFF;
  --accent-soft:   #DCE7FB;
  --accent-deep:   #153B9E;
  --focus:         #0E7A6C;
  --bg-rgb:        244, 247, 251;

  /* ---- Fonts ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-numbers: var(--font-display);

  /* ---- Type scale: fluid, so nothing needs a manual breakpoint override ---- */
  --text-xs:  0.78rem;
  --text-sm:  0.9rem;
  --text-md:  1rem;
  --text-lg:  clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --text-xl:  clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);

  --display-sm: clamp(1.7rem,  1.3rem + 2vw,   2.35rem);
  --display-md: clamp(2.1rem,  1.5rem + 2.8vw, 3.3rem);
  --display-lg: clamp(2.5rem,  1.7rem + 3.8vw, 4.3rem);
  --display-xl: clamp(2.9rem,  1.8rem + 5vw,   5.4rem);

  /* ---- Reading measure & fluid rhythm — replaces one-off margin-bottom values ---- */
  --measure:      68ch;
  --measure-wide: 78ch;

  --card-gap:    clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --story-gap:   clamp(2.5rem,  1.5rem + 4vw, 4.5rem);
  --section-gap: clamp(4rem,    2rem + 8vw,   9.5rem);
  --section-gap-tight: clamp(3rem, 1.75rem + 5vw, 6.5rem);

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 22px;

  /* ---- Motion: one shared easing vocabulary ---- */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --duration-fast: .25s;
  --duration-md:   .6s;
  --duration-slow: 1.1s;
  /* ---- Fixed spacing scale — used by components ported from the legacy
     styles.css (about/contact/process/resume). Kept alongside the fluid
     --card-gap/--story-gap/--section-gap scale above; new components should
     prefer those, but these keep ported components pixel-identical. ---- */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-7: 9.5rem;
}