/* koko-relaunch tokens. Owner: iris (creative/tokens.md), motion tokens: flux (creative/motion.md). Pasted as is by pixel. */
@font-face {
  font-family: "Shantell Sans";
  src: url("/fonts/shantell-sans-wght-latin.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}
/* metric-matched stand-in while Shantell loads (swift fix 5): Arial scaled to Shantell's advance widths at
   wght 400, measured on the copy of the 4 main pages, so the swap does not reflow lines */
@font-face {
  font-family: "Shantell Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 113.69%; ascent-override: 89.72%; descent-override: 28.15%; line-gap-override: 0%;
}
:root {
  /* color */
  --paper: #EDEFEA; --surface: #F8F9F6; --sunk: #DFE3DC;
  --ink: #1C211E; --muted: #4E5751;
  --leaf: #86AE9F; --leaf-ink: #2C5E50;
  --manila: #E8D6A4; --stamp: #B0271F; --stamp-wash: #F5DDD8;
  --guard: #F4D84A; --koala: #9AA19C;
  --sky: #5CDAFF; --on-sky: var(--ink); /* client override 2026-10-15: PFP ground. ink 10.06 on sky; muted, leaf-ink text, stamp, white forbidden on sky (tokens.md) */
  --focus: var(--leaf-ink); --success: var(--leaf-ink); --error: var(--stamp);
  /* type */
  --font: "Shantell Sans", "Shantell Fallback", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --t-small: clamp(0.875rem, 0.8476rem + 0.1124vw, 0.9375rem);
  --t-body: clamp(1.0625rem, 1.035rem + 0.1124vw, 1.125rem);
  --t-lead: clamp(1.1875rem, 1.105rem + 0.3371vw, 1.375rem);
  --t-h2: clamp(1.5rem, 1.281rem + 0.8989vw, 2rem);
  --t-h1-tool: clamp(1.875rem, 1.492rem + 1.573vw, 2.75rem);
  --t-h1: clamp(2.125rem, 1.303rem + 3.371vw, 4rem);
  --t-figure: clamp(1.375rem, 1.156rem + 0.8989vw, 1.875rem);
  --t-addr: 0.875rem; /* aegis A9: 14px floor (tokens.md had 0.8125rem) */
  --lh-tight: 1.02; --lh-head: 1.1; --lh-lead: 1.35; --lh-body: 1.5; --lh-small: 1.4;
  --w-body: 400; --w-lead: 500; --w-strong: 650; --w-head: 700; --w-h1: 780;
  --measure: 62ch;
  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-section: clamp(3rem, 1.685rem + 5.393vw, 6rem);
  --gutter: clamp(1rem, 0.5618rem + 1.798vw, 2rem);
  --pad-x: 16px; --max: 1120px; --tool: 640px; --tap: 44px;
  /* radius */
  --r-none: 0; --r-tag: 5px 3px 6px 3px;
  --r-field: 10px 6px 12px 7px / 7px 12px 6px 10px;
  --r-btn: 16px 8px 14px 9px / 9px 14px 8px 16px;
  --r-file: 3px 12px 4px 4px;
  --r-panel: 14px 22px 4px 18px / 18px 10px 4px 22px; /* sky hero panel */
  --r-avatar: 50%; /* header mark tile, matches the X avatar */
  /* borders */
  --bw-hair: 1.5px; --bw: 2px; --bw-bold: 3px;
  /* depth */
  --sheet: 7px 8px 0 -2px var(--sunk), 7px 8px 0 0 var(--ink);
  --ledge: 0 3px 0 0 var(--ink);
  --ledge-hover: 0 4px 0 0 var(--ink);
  --ledge-none: 0 0 0 0 var(--ink);
  --stamp-ring: inset 0 0 0 2px var(--surface), inset 0 0 0 3.5px currentColor;
  /* motion (flux, motion.md) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-press: 90ms; --dur-release: 160ms; --dur-ui: 200ms; --dur-leaf: 520ms;
  --dur-fade: 240ms; --dur-stamp: 220ms; --dur-wake: 1400ms; --delay-wake: 400ms;
}
@media (max-width: 359px) { :root { --pad-x: 12px; } }