/* Wyrd — tokens.css
 * Every color, face and measure the app uses. Light by default, dark when
 * the device or the person asks for it. Night sky, bone, fjord and gold.
 */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/cinzel.woff2") format("woff2");
}
:root {
  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --fg: #141a22;
  --muted: #5d6878;
  --line: #d6dbe3;
  --accent: #1f6f8b;
  --accent-ink: #ffffff;
  --accent-soft: #e2eff4;
  --gold: #b8891a;
  --gold-soft: #f6ecd2;
  --gold-ink: #5a4100;
  --good: #2e7d4f;
  --good-soft: #e1f1e7;
  --warn: #a86a12;
  --bad: #c2452d;
  --bad-soft: #f8e3df;
  --rare: #6b4fc7;
  --rare-soft: #ebe5fa;
  --display: "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 28px rgba(10, 16, 24, 0.12);
  --tabs-h: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;
    --surface: #161c25;
    --surface-2: #1c2330;
    --fg: #e8e4da;
    --muted: #9aa3b2;
    --line: #2a3341;
    --accent: #5ab7d3;
    --accent-ink: #06202a;
    --accent-soft: #16303a;
    --gold: #e3b84a;
    --gold-soft: #2c2614;
    --gold-ink: #f4dc9a;
    --good: #5ccf8c;
    --good-soft: #15301f;
    --warn: #e2b25a;
    --bad: #f07262;
    --bad-soft: #3a1d19;
    --rare: #a48cf0;
    --rare-soft: #241d3a;
    --shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161c25;
  --surface-2: #1c2330;
  --fg: #e8e4da;
  --muted: #9aa3b2;
  --line: #2a3341;
  --accent: #5ab7d3;
  --accent-ink: #06202a;
  --accent-soft: #16303a;
  --gold: #e3b84a;
  --gold-soft: #2c2614;
  --gold-ink: #f4dc9a;
  --good: #5ccf8c;
  --good-soft: #15301f;
  --warn: #e2b25a;
  --bad: #f07262;
  --bad-soft: #3a1d19;
  --rare: #a48cf0;
  --rare-soft: #241d3a;
  --shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}