/* Same tokens as the astab portfolio. Light is the default; dark is the
   inverted variant. Everything downstream reads "paper = surface, ink =
   foreground", so a theme is just these few lines. */
:root {
  --color-paper: #fffcf1;
  --color-ink: #1d1d1d;
  --color-white: #fffcf1;   /* knockout text on a filled (ink) surface */
  --color-red: #d62828;
  --color-red-ink: #fffcf1; /* text on a red fill */

  --font-mono-light: "Azeret Mono", ui-monospace, Consolas, monospace;
  --font-mono-regular: "Azeret Mono", ui-monospace, Consolas, monospace;
  --font-mono-semibold: "Azeret Mono", ui-monospace, Consolas, monospace;

  --line: 1px solid var(--color-ink);
  --content-padding: 16px;
  --section-padding-block: 4px;
  --header-padding-block: 8px;

  --sidebar-width: 336px;
  --strip-height: 132px;
  --dim: color-mix(in srgb, var(--color-ink) 55%, var(--color-paper));
  --faint: color-mix(in srgb, var(--color-ink) 12%, var(--color-paper));
  --faint-strong: color-mix(in srgb, var(--color-ink) 22%, var(--color-paper));
}

:root[data-theme="dark"] {
  --color-paper: #1d1d1d;
  --color-ink: #fffcf1;
  --color-white: #1d1d1d;
  --color-red: #ff4d4d;      /* lifted so it still reads on near-black */
  --color-red-ink: #1d1d1d;
}

/* The canvas is always dark whatever the page theme, so anything sitting on
   top of it opts into dark tokens rather than hard-coding colours. */
.on-dark {
  --color-paper: #1d1d1d;
  --color-ink: #fffcf1;
  --color-white: #1d1d1d;
  --color-red: #ff4d4d;
  --color-red-ink: #1d1d1d;
}