:root {
  --color-bg: #f2f0ea;
  --color-bg-subtle: #edebe5;
  --color-ink: oklch(0.344 0.007 48.379);           /* gb-dark1 */
  --color-text-muted: oklch(0.50 0.023 62.529);    /* between gb-dark4 and gb-dark3 */
  /* the working text colour: ink let down with the paper. The
     percentage is the dial: 100% is full ink. */
  --color-text: color-mix(in srgb, var(--color-ink) 75%, var(--color-bg));
  /* a step darker, for titles */
  --color-text-strong: color-mix(in srgb, var(--color-ink) 88%, var(--color-bg));
  --color-accent: oklch(0.534 0.082 155.435);       /* gb-faded-aqua */
  --color-accent-hover: oklch(0.46 0.082 155.435);  /* gb-faded-aqua darkened */
  --color-border: oklch(0.756 0.041 82.286);        /* gb-light3 */
  /* a wash of ink: the paper's subtle shade vanishes on a sheet */
  --color-code-bg: color-mix(in srgb, var(--color-ink) 6%, transparent);

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* The essays' size of text, which is the site's, and the labels'
     sizes: dates, filters and captions, then the smaller tags and
     headings in capitals */
  --text-body: 1.0625rem;
  --text-label: 0.875rem;
  --text-label-small: 0.75rem;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --max-width: 888px;
  --max-width-wide: 1188px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

[data-theme="dark"] {
  --color-bg: oklch(0.277 0.000 263.283);          /* gb-dark */
  --color-bg-subtle: oklch(0.344 0.007 48.379);    /* gb-dark1 */
  --color-ink: oklch(0.894 0.057 89.252);           /* gb-light1 */
  --color-text-muted: oklch(0.690 0.035 76.298);   /* gb-light4 */
  --color-text: color-mix(in srgb, var(--color-ink) 75%, var(--color-bg));
  --color-text-strong: color-mix(in srgb, var(--color-ink) 88%, var(--color-bg));
  --color-accent: oklch(0.756 0.108 137.707);       /* gb-bright-aqua */
  --color-accent-hover: oklch(0.645 0.094 145.299); /* gb-aqua */
  --color-border: oklch(0.411 0.011 51.777);        /* gb-dark2 */
  --color-code-bg: oklch(0.344 0.007 48.379);       /* gb-dark1 */
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  border-radius: 7px;
  border: 3px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text);
}

::-webkit-scrollbar-corner {
  background: var(--color-bg);
}

* {
  scrollbar-width: auto;
  scrollbar-color: var(--color-text-muted) var(--color-bg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

html {
  font-size: 16px;
  /* the scrollbar's space is reserved on every page, so the column
     does not shift when a page is tall enough to need one */
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}