/* Shared palette: brand, reading surfaces, controls and explicit feedback roles. */
@font-face { font-family: Clash; src: url('/fonts/ClashDisplay-Variable.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: Satoshi; src: url('/fonts/Satoshi-Variable.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
:root {
  --ink: #11120f;
  --paper: #f5f2ea;
  --lime: #c6ff00;
  --action-hover: #d8ff54;
  --accent-soft: #d6e5ac;
  --accent-ink: #4d651e;
  --surface-soft: #e8ebdf;
  --surface-dark: #20241c;
  --surface-raised: #2b3324;
  --text-light-secondary: #51564a;
  --text-dark-secondary: #c1c6b7;
  --border-light: #777e69;
  --border-dark: #929b80;
  --notice-ink: #705013;
  --notice-text: #ecd09a;
  --success-text: #b7e1c1;
  --error-text: #ffd1c8;
  --display: Clash, sans-serif;
  --body: Satoshi, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
/* Two tones keep focus visible on paper, ink, lime and image surfaces. */
:focus-visible {
  outline: 3px solid var(--ink) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--paper) !important;
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight !important; }
}
.icon { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }