/*
  The ink theme: a gallery. The room is dark and empty, and the artwork is the only thing
  in it with colour.

  That is the whole organising rule, and most of the choices below are it applied: the
  surround is near-black rather than a slate that competes with the art's own greys; the
  accent appears about once per screen; card backgrounds are the page colour rather than a
  raised grey, so a thumbnail grid reads as prints on a wall instead of as a dashboard.

  Every token in site/themes/_contract.yaml appears here, and every token the contract
  marks both_palettes appears in both blocks. Dark mode is not a derived variant -- the
  light palette is a bright gallery chosen against white, not the dark one inverted.

  No webfonts. The budget allows zero external origins, and a webfont would also mean a
  layout shift on the one element that is required to be legible above the strip.
*/
[data-site-theme="ink"] {
  /*
    A grotesque, not a serif. The system serif this replaced was the single largest reason
    the page read as an unstyled document: default serif at a default size is exactly what
    a browser shows when no stylesheet loaded at all.
  */
  --font-body: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-display: "SF Pro Display", ui-sans-serif, -apple-system, "Segoe UI Variable", system-ui, sans-serif;
  --font-size-base: 1.0625rem;
  --font-size-display: 1.35rem;
  --line-height: 1.65;

  --shell: 60rem;
  --measure: 34rem;
  --gutter: 1.25rem;
  /* Air is the main instrument a gallery has. */
  --stack: 2rem;
  --radius: 2px;

  --archive-columns: 2;
  --archive-columns-wide: 3;
  --cast-columns: 2;
  --cast-columns-wide: 4;

  --tap-target: 48px;
  --tap-gap: 8px;

  /* Light: a bright gallery. Paper walls, near-black ink. */
  --bg: #fbfbfa;
  --bg-raised: #f2f1ee;
  --ink: #121212;
  --ink-muted: #6b6862;
  /* The desk lamp in #001. Used about once per screen. */
  --accent: #b4551f;
  --accent-ink: #fffdfa;
  --rule: #e3e1dc;
  --focus: #b4551f;
  /* Transparent, not white: the artwork brings its own margin, and a mat around a mat is
     the card chrome this theme exists to remove. */
  --strip-mat: transparent;
}

@media (prefers-color-scheme: dark) {
  [data-site-theme="ink"]:not([data-color-scheme="light"]) {
    --bg: #0a0a0b;
    --bg-raised: #141416;
    --ink: #f0eeea;
    --ink-muted: #918d86;
    --accent: #e8a33d;
    --accent-ink: #0a0a0b;
    --rule: #232326;
    --focus: #e8a33d;
    --strip-mat: transparent;
  }
}

[data-site-theme="ink"][data-color-scheme="dark"] {
  --bg: #0a0a0b;
  --bg-raised: #141416;
  --ink: #f0eeea;
  --ink-muted: #918d86;
  --accent: #e8a33d;
  --accent-ink: #0a0a0b;
  --rule: #232326;
  --focus: #e8a33d;
  --strip-mat: transparent;
}