/* Shared design tokens for every page on the site. */
:root {
  color-scheme: dark;
  --bg: #0e0e10;
  --bg-elev: #151517;
  --surface: #1b1b1e;
  --surface-2: #242428;
  --border: #2c2c31;
  --border-strong: #46464e;
  --ink: #ededee;
  --ink-2: #a3a3ab;
  --ink-3: #6e6e76;
  --ivory: #efe6d2;
  --ivory-ink: #22201b;

  --correct: #4c9a68;
  --present: #c9a23c;
  --absent: #3a3a40;
  --on-mark: #ffffff;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .28);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f5f1;
    --bg-elev: #ffffff;
    --surface: #ffffff;
    --surface-2: #edece7;
    --border: #e1dfd8;
    --border-strong: #c4c1b8;
    --ink: #19191b;
    --ink-2: #5a5a61;
    --ink-3: #8b8b91;
    --absent: #7d7d85;
    --correct: #4a9466;
    --present: #c69a22;
    --shadow: 0 1px 2px rgba(20, 20, 20, .06), 0 12px 32px rgba(20, 20, 20, .08);
  }
}

body.contrast {
  --correct: #e2793b;
  --present: #5a9fe0;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 12px;
  border: 1px solid transparent; text-decoration: none;
  font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  background: var(--ink); color: var(--bg);
  transition: transform .15s var(--ease), background .2s, border-color .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn.secondary:hover { border-color: var(--ink-3); }
.btn .icon { width: 18px; height: 18px; }