/* CRATE: warm analog / neo-brutalist theme.
   Tokens mirror the Figma semantic variables; shadows are hard (no blur),
   borders are 2px ink, radius is 0 everywhere. */
:root {
  --bg: #f1e7d2;
  --surface: #fbf5e7;
  --ink: #2a2017;
  --ink-muted: #6a5a41;
  --line: #dbc9aa;
  --owned: #3e5b39;
  --accent: #c99a3a;
  --wanted: #c0673b;
  --sage: #8a9a6b;
  --danger: #a8472a;
  --mustard: #d7a93e;

  /* Shadows are pinned to this rather than --ink directly, so they stay
     near-black in dark mode instead of flipping to cream. */
  --shadow-color: #2a2017;
  --shadow-xs: 2px 2px 0 0 var(--shadow-color);
  --shadow-sm: 3px 3px 0 0 var(--shadow-color);
  --shadow-md: 4px 4px 0 0 var(--shadow-color);

  /* Invariant text colours for content pinned to a fixed-dark or
     fixed-cream surface regardless of scheme (colour-fill buttons/badges,
     the hero band, list-row cover art overlays). */
  --ink-fixed: #2a2017;
  --cream-fixed: #f1e7d2;

  --display: "Anton", ui-sans-serif, system-ui, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --dur-slower: 300ms;
}

/* Duplicated below for :root[data-theme=dark]: a media query and a selector can't share one custom-property block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191008;
    --surface: #251a10;
    --ink: #f1e7d2;
    --ink-muted: #a08a6b;
    --line: #3a2d1e;
    --owned: #4d7046;
    --wanted: #d07a4d;
    --danger: #c25736;
    --shadow-color: #0c0805;
  }
}

:root[data-theme="dark"] {
  --bg: #191008;
  --surface: #251a10;
  --ink: #f1e7d2;
  --ink-muted: #a08a6b;
  --line: #3a2d1e;
  --owned: #4d7046;
  --wanted: #d07a4d;
  --danger: #c25736;
  --shadow-color: #0c0805;
}

* {
  box-sizing: border-box;
  border-radius: 0;
}

html,
body {
  margin: 0;
}

body {
  font: 15px/1.5 var(--mono);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}