/* kayos-atelier.css — the vessel's one design system (kayos-alpha 1.2.1, 2026-09-22).
   David: "1 (icons), 2 (one accent), 3 (one type system), 4 (chat as centrepiece), 5 (motion), 7 (a quieter top bar)."
   Every page links this file and maps its own variables onto these tokens, so the vessel reads as ONE product:
     · one accent — copper (links, primary buttons, selection, focus). Status colours stay semantic (ok / warn / fail).
     · one type system — Satoshi for the interface and chat, Bodoni Moda for display and headings, JetBrains Mono for
     labels / kbd / code (2026-09-28). No page loads its own font files any more.
     · one rhythm — radii 14 (cards) · 8 (rows, inputs) · 999 (pills); spacing on a 4 px grid.
     · one motion — 150 ms ease on every hover/focus/colour change; pages and messages fade in, never pop. */
/* ── type (2026-09-28, David + Sam: option B "Bodoni maison") — self-hosted, latin, licenses in /public/fonts/LICENSES.md ── */
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/public/fonts/bodoni-moda-roman.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/public/fonts/bodoni-moda-italic.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/fonts/satoshi-400.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 500; font-display: swap; src: url('/public/fonts/satoshi-500.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url('/public/fonts/satoshi-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/public/fonts/jetbrains-mono.woff2') format('woff2'); }
:root {
  --k-accent: #A5652F;                 /* copper — 5.0:1 on paper, AA for text */
  --k-accent-hover: #8E5526;
  --k-accent-soft: rgba(165,101,47,0.10);
  --k-accent-line: rgba(165,101,47,0.28);
  --k-ok: #4E7A5E; --k-ok-soft: #E6EFE8;
  --k-warn: #9A6A1F; --k-warn-soft: #F6ECD9;
  --k-fail: #A0412D; --k-fail-soft: #F5E2DC;
  --k-ink: #1D1B18; --k-ink-2: #55514A; --k-ink-3: #8E887E;
  --k-paper: #FFFFFF; --k-line: rgba(20,22,26,.08);   /* paper-white panes, neutral hairlines (2026-09-28) */
  --k-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --k-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --k-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --k-ink-hair: rgba(20,22,26,.08);
  --k-r-card: 14px; --k-r-row: 8px; --k-r-pill: 999px;
  --k-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --k-fast: 150ms; --k-med: 220ms;
}
/* motion: everything interactive eases; nothing snaps */
:where(a, button, input, select, textarea, [role="button"], .btn, .tab, .item, .node, .card, .ol-row, .nav-trow, .nav-row, .mtab, .topbar-btn, .ib):not(svg *) {
  transition: background-color var(--k-fast) var(--k-ease), color var(--k-fast) var(--k-ease), border-color var(--k-fast) var(--k-ease),
              box-shadow var(--k-fast) var(--k-ease), opacity var(--k-fast) var(--k-ease), transform var(--k-fast) var(--k-ease);
}
:focus-visible { outline: 2px solid var(--k-accent-line); outline-offset: 2px; }
/* …but never on text fields: they style their own focus (the chat composer, notebook, search boxes). Loaded after each
   page's own CSS, this ring beat the chat's `outline:none` and drew a square box around the input (David 2026-09-22). */
input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible { outline: none; }
::selection { background: rgba(165,101,47,0.18); }
@keyframes k-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
body { animation: k-fade-in var(--k-med) var(--k-ease) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* the icon set — thin line icons, one stroke weight, tinted by currentColor */
.ki { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; flex: none; }

/* ═══ UNIFIER (2026-09-28) — one type system, white panes ═══
   This file is linked LAST in every page's <head>, so these win over each page's own :root.
   Fonts: every page-level font variable resolves to the three tokens. */
html:root, html[data-theme] {
  --serif: var(--k-serif); --display: var(--k-serif);
  --sans: var(--k-sans); --body: var(--k-sans); --font: var(--k-sans);
  --mono: var(--k-mono);
}
/* Surfaces: page backgrounds are paper-white in every light theme (white · linen). Card / pill / callout tints are
   left alone — they need the contrast. The dark theme is untouched. */
html:not([data-theme="dark"]) {
  background: #FFFFFF;
  --paper: #FFFFFF;      /* comms, mailbox, ontology, atlas-console, login, account, home-hearth, notebook, mind, home */
  --bg: #FFFFFF;         /* notebook, mind (#f6f3ec) · texting, vault, email-recipients (#faf8f4) · home-hearth linen · brain, brief, mcp */
  --void: #FFFFFF;       /* chat: the pane */
  --surface: #FFFFFF;    /* chat: tab bar, cards, composer (linen #FFFDF9) · brain panels (already white) */
  --deep: #F4F4F2;       /* chat: active tab (linen #F5EFE2 → neutral) */
  --sunk: #F4F4F2;       /* home-hearth: sunk wells (linen #F5EFE2 → neutral) */
  --line: rgba(20,22,26,.08); --hairline: rgba(20,22,26,.08);
}
html:not([data-theme="dark"]) body { background-color: #FFFFFF; background-image: none; }