/* ============================================================
   tokens.css
   Design tokens, reset, @font-face, base element styles only.
   (CLAUDE.md §8). No component styling lives here.
   Hand-written CSS — no framework.
   ============================================================ */

/* ---------- @font-face (self-hosted; CLAUDE.md §5) ---------- */
@font-face{font-family:"Switzer";src:url("/fonts/Switzer-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Switzer";src:url("/fonts/Switzer-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Switzer";src:url("/fonts/Switzer-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Switzer";src:url("/fonts/Switzer-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Switzer";src:url("/fonts/Switzer-Black.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  /* palette — from Developer Office business cards */
  --off-white:#F7F2F6;
  --near-black:#1C1C1C;
  --charcoal:#3C3A38;
  --cobalt:#BD7AB4;
  --cobalt-dark:#8A4E82;
  --soft-grey:#E8DFE6;
  --mid-grey:#6B6469;
  --error:#B4322A;

  /* spacing scale */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  /* radii / motion */
  --radius:4px; --radius-sm:2px;
  --ease:cubic-bezier(.2,.6,.2,1);
  --t-state:180ms var(--ease);

  /* layout */
  --page-x:clamp(20px,6vw,120px);
  --measure:64ch;

  /* type families */
  --display:"Switzer", sans-serif;
  --body:"Switzer", sans-serif;
  --mono:"Switzer", sans-serif;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;max-width:100%}
body{
  background:#fff;
  color:var(--near-black);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
  min-width:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
ul{list-style:none}
::selection{background:var(--cobalt);color:var(--off-white)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

/* ---------- base type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.02}
p{max-width:var(--measure)}

/* ---------- skip link ---------- */
.skip-link{
  pointer-events:auto;
  position:absolute;left:var(--space-4);top:-60px;z-index:200;
  background:var(--near-black);color:var(--off-white);
  padding:10px 16px;border-radius:var(--radius);transition:top var(--t-state);
}
.skip-link:focus{top:var(--space-4)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- reduced motion (global fallback; JS also guards) ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}