:root {
  --canvas:#fbfaf7; --surface:#ffffff; --surface-2:#f1eee8; --border:#ded8ce; --border-strong:#b9afa1;
  --ink:#24221f; --muted:#716b63; --accent:#5d4b3c; --accent-hover:#46382e; --accent-ink:#fffaf3;
  --accent-text:#5d4b3c; --accent-soft:#eee6dc; --accent-strong:#45372c; --accent-border:#cdbba7;
  --success:#3b7659; --success-ink:#fff; --success-soft:#e4f0e8; --success-strong:#2d6047;
  --warning:#a9672e; --warning-ink:#fff; --warning-soft:#f7eadc; --warning-strong:#8d5425;
  --danger:#a94b4b; --danger-ink:#fff; --danger-soft:#f5e2e2; --danger-strong:#8f3c3c;
  --chart-1:#5d4b3c; --chart-2:#8b6f5a; --chart-3:#b58a68; --chart-4:#6e8065; --chart-5:#557a86; --chart-6:#7b6d98;
  --font-display:Georgia,serif; --font-body:Inter,ui-sans-serif,system-ui,sans-serif; --font-sans:Inter,ui-sans-serif,system-ui,sans-serif; --font-mono:ui-monospace,monospace;
  --display-weight:700; --display-tracking:-.02em; --eyebrow-tracking:.08em; --radius-card:20px; --radius-input:12px; --radius-btn:999px;
}
html[data-theme="dark"] {
  --canvas:#211d19; --surface:#2b2621; --surface-2:#383129; --border:#51483f; --border-strong:#796b5d;
  --ink:#fbf7f0; --muted:#c1b6a9; --accent:#d1a878; --accent-hover:#e1be8f; --accent-ink:#2b2118;
  --accent-text:#e5bd8b; --accent-soft:#44382d; --accent-strong:#f0c99b; --accent-border:#725e49;
  --success:#6eb18a; --success-ink:#1e2b22; --success-soft:#263d2f; --success-strong:#9cd0ae;
  --warning:#d49a65; --warning-ink:#2b2118; --warning-soft:#493528; --warning-strong:#edbd8c;
  --danger:#dc8f8f; --danger-ink:#2b1c1c; --danger-soft:#4a2d2d; --danger-strong:#f0b0b0;
  --chart-1:#d1a878; --chart-2:#c59b7a; --chart-3:#e1b990; --chart-4:#98b38e; --chart-5:#8ebbc7; --chart-6:#b9a9d2;
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */