@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  color-scheme: light;
  --bg: #F2F4F1;
  --surface: #FFFFFF;
  --ink: #17262A;
  --muted: #5C6B6E;
  --line: #D5DCD8;
  --wait: #C9821C;
  --wait-soft: #FBEFD9;
  --go: #12805A;
  --go-ink: #FFFFFF;
  --danger: #B3402F;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Instrument Sans', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0F1A1C;
    --surface: #172427;
    --ink: #E8EFEC;
    --muted: #94A3A3;
    --line: #2A3A3D;
    --wait: #F0B04A;
    --wait-soft: #2E2615;
    --go: #1FA672;
    --go-ink: #FFFFFF;
    --danger: #E0705F;
  }
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
button {
  font: 600 1rem/1 var(--body);
  border: 0;
  border-radius: 12px;
  padding: 0.95rem 1.25rem;
  cursor: pointer;
  background: var(--ink);
  color: var(--bg);
  touch-action: manipulation;
}
button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
button.go { background: var(--go); color: var(--go-ink); }
button:disabled { opacity: 0.5; cursor: default; }
input {
  font: 500 1.1rem var(--body);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  width: 100%;
}
:focus-visible { outline: 3px solid var(--wait); outline-offset: 2px; }
.muted { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}