/* Color tokens shared by every page. Charcoal brand surfaces stay the same in both modes; the page
   itself, its cards and its text flip with the system setting. */
:root {
  color-scheme: light;
  --brand: #2a2c2f;
  --brand-deep: #1c1d20;
  --brand-soft: #d3cfc4; /* accents on dark surfaces */
  --sun: #fff0cc;
  --bg: #fafaf9;
  --surface: #ffffff; /* cards that sit on --bg */
  --link: var(--brand); /* links and accents on light surfaces */
  --tint-1: #f0f0ee;
  --tint-2: #e4e4e1;
  --tint-3: #d7d7d3;
  --ink: #1c1d20;
  --ink-soft: #4d4f55;
  --ink-faint: #6b6d73;
  --rule: #e1e1de;
  --night: #1a1b1e; /* code card */
  --night-text: #ececea;
  --night-faint: #a9aaae;
  --code-bg: #121315;
  --code-rule: #2b2d31;
  --dot-color: rgb(42 44 47 / 22%);
}

/* MARK: Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #111214;
    --surface: #1f2023;
    --link: var(--brand-soft);
    --tint-1: #1c1d20;
    --tint-2: #232427;
    --tint-3: #2b2c30;
    --ink: #ececea;
    --ink-soft: #b5b6bb;
    --ink-faint: #8f9197;
    --rule: #2b2c30;
    --night: #1d1e21; /* code card */
    --night-text: #ececea;
    --night-faint: #a9aaae;
    --code-bg: #0c0d0f;
    --code-rule: #26272b;
    --dot-color: rgb(236 236 234 / 12%);
  }
}