:root {
  --bg: #f4f2ee;
  --dot: #d9d5cc;
  --surface: rgb(255 255 255 / 0.78);
  --surface-solid: #ffffff;
  --border: rgb(17 17 17 / 0.08);
  --text: #18181b;
  --muted: #71717a;
  --accent: #18181b;
  --accent-text: #ffffff;
  --hover: rgb(17 17 17 / 0.06);
  --danger: #dc2626;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 1px 1px rgb(0 0 0 / 0.03), 0 4px 8px rgb(0 0 0 / 0.04),
    0 16px 32px rgb(0 0 0 / 0.06), 0 32px 64px rgb(0 0 0 / 0.06);
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111113;
    --dot: #2a2a2e;
    --surface: rgb(28 28 31 / 0.78);
    --surface-solid: #1c1c1f;
    --border: rgb(255 255 255 / 0.08);
    --text: #f4f4f5;
    --muted: #a1a1aa;
    --accent: #f4f4f5;
    --accent-text: #18181b;
    --hover: rgb(255 255 255 / 0.07);
    --danger: #f87171;
    --shadow-lg: 0 1px 1px rgb(0 0 0 / 0.2), 0 8px 24px rgb(0 0 0 / 0.35), 0 32px 64px rgb(0 0 0 / 0.35);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

button { font: inherit; color: inherit; }

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}