/* Shared appearance: a cinema-dark canvas, fresh green, and independent type. */
@font-face {
  font-family: "Apfel Grotezk";
  src: url("/static/fonts/ApfelGrotezk-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("/static/fonts/ApfelGrotezk-Mittel.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("/static/fonts/ApfelGrotezk-Fett.woff2") format("woff2");
  font-style: normal;
  font-weight: 650 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --font-ui: "Apfel Grotezk", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-ui);
  --paper: #141916;
  --ink: #eff4ed;
  --muted: #a8b4aa;
  --wash: #202a23;
  --surface-raised: #253128;
  --line: #36433a;
  --control-border: #788d7d;
  --olive: #79eb99;
  --olive-deep: #a3f5b8;
  --accent: #79eb99;
  --accent-hover: #a3f5b8;
  --on-accent: #102b18;
  --accent-surface: #243e2c;
  --accent-border: #579b6a;
  --error: #ffb4a8;
  --error-surface: #472b29;
  --error-border: #c97a70;
  --focus: var(--olive);
  --selection: #365d40;
  --scrollbar: #788d7d;
  --stage-ink: #0d1410;
  --stage-text: #f1f6ef;
  --stage-muted: #c3d0c6;
  --stage-accent: #79eb99;
  --stage-on-accent: #102b18;
  --brand-filter: invert(91%) sepia(11%) saturate(1078%) hue-rotate(69deg) brightness(100%);
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f5f7f2;
  --ink: #18291e;
  --muted: #526657;
  --wash: #e8eee5;
  --surface-raised: #ffffff;
  --line: #cdd9cb;
  --control-border: #718772;
  --olive: #16723a;
  --olive-deep: #105b2c;
  --accent: #18783e;
  --accent-hover: #105b2c;
  --on-accent: #ffffff;
  --accent-surface: #dbefd9;
  --accent-border: #71996e;
  --error: #a03226;
  --error-surface: #fbe6e0;
  --error-border: #b66559;
  --selection: #b9e4b6;
  --scrollbar: #718772;
  --brand-filter: none;
}
html { background: var(--paper); color: var(--ink); }
* { scrollbar-color: var(--scrollbar) var(--paper); scrollbar-width: thin; }
::selection { background: var(--selection); color: var(--ink); }
input, textarea { caret-color: var(--olive); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--olive); }
img[src="/static/buffalist-buffalo.svg"] { filter: var(--brand-filter); }

/* The same compact appearance control is available on the home and settings pages. */
.appearance-toggle, .home-appearance { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--olive); cursor: pointer; }
:root[data-theme] .appearance-toggle, :root[data-theme] .home-appearance { display: flex; }
.appearance-toggle svg, .home-appearance svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.appearance-toggle:focus-visible, .home-appearance:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.theme-icon-light, :root[data-theme="light"] .theme-icon-dark { display: none; }
:root[data-theme="light"] .theme-icon-light { display: block; }
@media (hover: hover) {
  .appearance-toggle:hover, .home-appearance:hover { background: var(--wash); }
}