/* pktito tokens, from the design system's tokens.json. Light on :root,
   dark under the system setting unless the page is set light, and again
   when it is set dark. */

@font-face { font-family: "Archivo"; src: url("fonts/Archivo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("fonts/CommitMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("fonts/CommitMono-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --ground: #f4f6f9;
  --surface: #e8ecf2;
  --sunk: #dbe1ea;
  --ink: #101b33;
  --ink-muted: #4a5670;
  --plume: #6cc4f5;
  --plume-press: #4fb0ea;
  --on-plume: #101b33;
  --beak: #c85a1e;
  --term: #101b33;
  --term-ink: #e4ebf6;
  --term-dim: #8fa0bd;
  --term-line: #2a3a5a;
  --wave: #4f77b0;
  --wave-played: var(--plume);
  --ok: #17673f;
  --err: #b42318;
  --focus: #101b33;
  --link: var(--ink);
  --shadow-float: 0 12px 32px rgba(16, 27, 51, 0.18);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 56px;
  --space-7: 88px;
  --space-8: 160px;
  --margin-page: 40px;
  --radius-0: 0;
  --radius-ui: 8px;
  --radius-dot: 999px;
  --measure: 34em;
  --column-narrow: 560px;
  --frame: 8px;
  --sidebar: 280px;
  --window-min: 720px;
  --page-max: 1440px;
  --font-sans: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Commit Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0b1220;
    --surface: #111a2b;
    --sunk: #182337;
    --ink: #e5ebf4;
    --ink-muted: #9aa7bf;
    --beak: #f39a5c;
    --term: #070c17;
    --term-line: #1f2b44;
    --ok: #6fd39b;
    --err: #ff8f80;
    --focus: #6cc4f5;
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b1220;
  --surface: #111a2b;
  --sunk: #182337;
  --ink: #e5ebf4;
  --ink-muted: #9aa7bf;
  --beak: #f39a5c;
  --term: #070c17;
  --term-line: #1f2b44;
  --ok: #6fd39b;
  --err: #ff8f80;
  --focus: #6cc4f5;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* a phone: margins 20px, sections 96px apart (tokens.json, usage) */
@media (max-width: 640px) {
  :root { --margin-page: 20px; --space-8: 96px; }
}