:root {
  --tmb-blue: #1f4e79;
  --tmb-blue-deep: #173a5b;
  --tmb-blue-mid: #3f719d;
  --tmb-blue-highlight: #83b5e0;
  --tmb-blue-mist: #dce8f0;
  --tmb-notes-red: #b3261e;
  --tmb-tools-green: #3f7d47;
  --tmb-cacd-terracotta: #b96745;
  --tmb-sand: #cdad7a;
  --tmb-teal: #1f786a;
  --tmb-indigo: #2a1f78;

  --tmb-paper: #f4f1e9;
  --tmb-page: #fffefb;
  --tmb-ink: #17242e;
  --tmb-slate: #647078;
  --tmb-rule: #d7d4ca;
  --tmb-night: #10161a;
  --tmb-panel: #1c252b;
  --tmb-dark-rule: #344047;
  --tmb-light-ink: #edf0eb;
  --tmb-focus: #1f4e79;

  --tmb-canvas: var(--tmb-paper);
  --tmb-surface: var(--tmb-page);
  --tmb-text: var(--tmb-ink);
  --tmb-text-muted: var(--tmb-slate);
  --tmb-line: var(--tmb-rule);
  --tmb-interactive: var(--tmb-blue);
  --tmb-apps-accent: var(--tmb-blue);
  --tmb-notes-accent: var(--tmb-notes-red);
  --tmb-exclude: var(--tmb-notes-red);

  --tmb-font-sans: "thimabi Karla", Arial, sans-serif;
  --tmb-font-serif: "thimabi Newsreader", Georgia, serif;
  --tmb-font-mono: "thimabi Inconsolata", ui-monospace, monospace;

  --tmb-radius-card: 28px;
  --tmb-radius-control: 16px;
  --tmb-radius-small: 10px;
  --tmb-space-1: 4px;
  --tmb-space-2: 8px;
  --tmb-space-3: 12px;
  --tmb-space-4: 16px;
  --tmb-space-5: 24px;
  --tmb-space-6: 32px;
  --tmb-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tmb-focus) 30%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tmb-canvas: var(--tmb-night);
    --tmb-surface: var(--tmb-panel);
    --tmb-text: var(--tmb-light-ink);
    --tmb-text-muted: #afbbc1;
    --tmb-line: var(--tmb-dark-rule);
    --tmb-interactive: var(--tmb-blue-highlight);
    --tmb-focus: var(--tmb-blue-highlight);
  }
}