/* What tokens.json cannot hold, carried from the old stylesheets (now in archived/tokens/).
   Loaded after tokens.css. */

/* ── from tokens/fonts.css ─────────────────────────────────────────────
   Lair pairs Noto Sans (400/500/600/700) with JetBrains Mono (400/500) — the mono is the
   one contrasting register: hero values, machine strings, log lines. Two families, never a third.
   SUBSTITUTION NOTE: no font binaries were provided, so Noto Sans is loaded
   from Google Fonts. Drop real .woff2 files into fonts/ and replace
   the @import with local @font-face rules if self-hosting is required. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ── from tokens/colors.css ──────────────────────────────────────────── */
/* ── Dark theme (default) ───────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --accent-quiet:color-mix(in oklab,var(--accent) 16%,transparent);
  --accent-hover:color-mix(in oklab,var(--accent) 88%,white);
  --accent-press:color-mix(in oklab,var(--accent) 88%,black);
  --focus-ring:color-mix(in oklab,var(--accent) 55%,transparent);
}

/* ── Light theme — same structure inverted, tokens only ─────────────── */
[data-theme="light"]{
  color-scheme:light;
}

/* ── from tokens/typography.css ──────────────────────────────────────── */
/* Sans for words, mono for values. Hierarchy comes from WEIGHT and BRIGHTNESS
   before size — the size ramp is deliberately shallow. */
:root{
  /* Semantic roles. --type-display is ONE per page (the page's headline); every other h1 steps down to --type-title. */
  --type-display:var(--weight-bold) var(--text-5xl)/1.1 var(--font-sans);
  --type-title:var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-section:var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans);
  --type-body-strong:var(--weight-medium) var(--text-md)/var(--leading-normal) var(--font-sans);
  --type-label:var(--weight-medium) var(--text-sm)/var(--leading-snug) var(--font-sans);
  --type-caption:var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
  --type-overline:var(--weight-semibold) var(--text-2xs)/1 var(--font-sans);
  --type-mono:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
  --type-value:var(--weight-medium) var(--text-2xl)/1 var(--font-mono); /* hero numerals — always tabular */
}

/* ── from tokens/spacing.css ─────────────────────────────────────────── */
:root{
  --pad-control:0 .75rem;        /* button / input horizontal — 12 */
}

/* ── from tokens/motion.css ──────────────────────────────────────────── */
/* Short and settled: 100–200ms, decelerating ease-out with no overshoot. Enter = fade + 4px rise. Press = scale .97. */
:root{
  --dur-fast:100ms; /* @kind other */
  --dur-base:150ms; /* @kind other */
  --dur-slow:200ms; /* @kind other */
  --ease-emphasized:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --transition-control:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-emphasized);
  --press-scale:.97; /* @kind other */--enter-rise:.25rem;
}
@keyframes lair-enter{from{opacity:0;transform:translateY(var(--enter-rise))}to{opacity:1;transform:none}}
@keyframes lair-scrim-in{from{opacity:0}to{opacity:1}}
@keyframes lair-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes lair-sheet-in{from{transform:translateY(12%);opacity:.6}to{transform:none;opacity:1}}

/* ── from tokens/base.css ────────────────────────────────────────────── */
/* Minimal element defaults. Consumers get these for free with components/bundle.css. */
body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-base) var(--ease-out)}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--accent-quiet);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
h1,h2,h3,h4,p{margin:0}