/* Colour and type tokens. Swap these to rebrand; components only read variables.
   Monochrome plus red: red is reserved for overlaps, errors and delete. */
:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --line: #e3e3e0;
  --line-strong: #cfcfcb;
  --ink: #141414;
  --ink-2: #5c5c58;
  --on-ink: #ffffff;
  --danger: #d92d20;
  --danger-soft: #fdecea;
  --danger-ink: #b42318;
  --view-bg: #ebebe8;
  --shadow: 0 1px 2px rgb(20 20 20 / 0.04), 0 4px 16px rgb(20 20 20 / 0.04);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.125rem;

  --r-card: 16px;
  --r-ctl: 10px;
  --r-shell: 24px;
  --gap: 16px;
  --tap: 44px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0e;
    --surface: #181817;
    --surface-2: #1e1e1d;
    --line: #2c2c2a;
    --line-strong: #3a3a38;
    --ink: #f2f2ef;
    --ink-2: #a5a5a0;
    --on-ink: #141414;
    --danger: #f04438;
    --danger-soft: #3a1714;
    --view-bg: #222221;
    --shadow: none;
    color-scheme: dark;
  }
}