:root {
  --bg: #f3f3f3;
  --fg: #000;
  --fg-muted: #555;
  --fg-faint: #888;

  --border: #e0e0e0;
  --border-light: #ccc;
  --border-focus: #999;
  --border-hover: #aaa;

  --selection: #ffff7f;

  --block-dim: rgb(0 0 0 / 20%);
  --block-dim-max: 0.4;

  --popover-bg: #fffef8;
  --popover-border: #d4c5a0;
  --popover-shadow: rgba(0, 0, 0, 0.15);

  --link: #0000ee;
  --nav-bg: var(--bg);
}

html.dark {
  --bg: #1a1a1e;
  --fg: #d4cfc4;
  --fg-muted: #9a9488;
  --fg-faint: #6b665c;

  --border: #2e2e33;
  --border-light: #3a3a40;
  --border-focus: #5a5a60;
  --border-hover: #4a4a50;

  --selection: #5c5020;

  --block-dim: rgb(0 0 0 / 30%);
  --block-dim-max: 0.5;

  --popover-bg: #24242a;
  --popover-border: #3a3a40;
  --popover-shadow: rgba(0, 0, 0, 0.4);

  --link: #7aa2d4;
}