@layer base {
  /*
   * Theme palette — set --theme-faint to the page's faint background color and
   * the full 50–950 scale is derived via OKLCH relative color syntax.
   *
   * Lightness offsets and chroma multipliers match the Evil Martians Harmonizer
   * scale (https://harmonizer.evilmartians.com/).
   */
  :root {
    --hue: 150;
    --theme-base: oklch(0.98 0.01 var(--hue));

    --theme-faint: oklch(from var(--theme-base) calc(l - 0.005) calc(c * 0.5) h);
    --theme-50: var(--theme-base);
    --theme-100: oklch(from var(--theme-base) calc(l - 0.01) calc(c * 2) h);
    --theme-200: oklch(from var(--theme-base) calc(l - 0.07) calc(c * 4) h);
    --theme-300: oklch(from var(--theme-base) calc(l - 0.14) calc(c * 8) h);
    --theme-400: oklch(from var(--theme-base) calc(l - 0.22) calc(c * 12) h);
    --theme-500: oklch(from var(--theme-base) calc(l - 0.31) calc(c * 16) h);
    --theme-600: oklch(from var(--theme-base) calc(l - 0.35) calc(c * 15) h);
    --theme-700: oklch(from var(--theme-base) calc(l - 0.43) calc(c * 13) h);
    --theme-800: oklch(from var(--theme-base) calc(l - 0.54) calc(c * 10) h);
    --theme-900: oklch(from var(--theme-base) calc(l - 0.65) calc(c * 8) h);
    --theme-950: oklch(from var(--theme-base) calc(l - 0.69) calc(c * 7) h);
  }
}