/* ============================================================
   kevfreeney.com — Design Tokens (primitive -> semantic -> component)
   ============================================================ */

:root{
  /* ---------- PRIMITIVE ---------- */
  /* colour */
  --c-ink-0:#fbf9f3; --c-ink-1:#f4f1ea; --c-ink-2:#cdc8bb; --c-ink-3:#928d7e; --c-ink-4:#6a655b;
  --c-void-0:#100f0c; --c-void-1:#15140f; --c-void-2:#1f1d16; --c-void-3:#2a2820;
  --c-paper-0:#f3f0e8; --c-paper-1:#e8e4d9; --c-paper-2:#dcd7c9;
  --c-amber:#e8a23a; --c-amber-deep:#b9760f;
  --c-line-d:rgba(255,255,255,.11); --c-line-d2:rgba(255,255,255,.22);
  --c-line-l:rgba(0,0,0,.13); --c-line-l2:rgba(0,0,0,.26);

  /* type */
  --ff-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --t-xs:10.5px; --t-sm:11.5px; --t-cap:12.5px; --t-base:14px;
  --t-md:clamp(1rem,1.2vw,1.12rem);
  --t-lg:clamp(1.25rem,1.8vw,1.5rem);
  --t-xl:clamp(1.6rem,3vw,2.4rem);
  --t-2xl:clamp(1.9rem,4.2vw,3rem);
  --lh-tight:1.1; --lh-snug:1.24; --lh-body:1.72; --lh-loose:2.05;
  --tr-wide:.16em; --tr-mid:.1em; --tr-tight:.005em;

  /* space — 8px baseline grid */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px;
  --s-6:64px; --s-7:96px; --s-8:128px; --s-9:176px;
  --space-page:clamp(22px,6vw,96px);

  /* layout */
  --maxw:1120px; --grid-cols:12; --grid-gap:clamp(16px,2.2vw,28px);

  /* shape + motion */
  --r-sm:2px; --dur-fast:160ms; --dur:240ms; --ease:cubic-bezier(.2,.6,.2,1);

  /* ---------- SEMANTIC (dark default) ---------- */
  --bg:var(--c-void-1); --surface:var(--c-void-2);
  --text:var(--c-ink-1); --text-2:var(--c-ink-2); --text-muted:var(--c-ink-3); --text-faint:var(--c-ink-4);
  --border:var(--c-line-d); --border-strong:var(--c-line-d2);
  --accent:var(--c-amber); --selection:var(--c-amber);

  /* ---------- COMPONENT ---------- */
  --nav-h:58px;
  --hero-pad-block:clamp(32px,6vh,72px) clamp(40px,7vw,80px);
  --tagline-reserve:calc(3 * var(--lh-snug) * 1em); /* hold 3 lines, no layout shift */
  --row-pad-y:var(--s-2);
  --caret-w:.06em;
}

:root[data-theme="light"]{
  --bg:var(--c-paper-0); --surface:var(--c-paper-1);
  --text:#161409; --text-2:#3c3a30; --text-muted:#6c685c; --text-faint:#9b9788;
  --border:var(--c-line-l); --border-strong:var(--c-line-l2);
  --accent:var(--c-amber-deep); --selection:var(--c-amber-deep);
}