/* The palette, in one place, because two pages use it.
 *
 * Three tiers, and the order is the rule: light on bare `:root`, the system's
 * dark preference unless the reader asked for light, then an explicit dark last
 * — so the toggle wins in both directions.
 *
 * `--wall-fill` must stay opaque: the drawing paints every wall's outline first
 * and every wall's body over all of them, and a body that let the outlines
 * through would put a seam across each corner.
 *
 * The printed sheet keeps the light palette in either mode: it shows what
 * the paper will look like, so it takes the light values here, and the dark
 * tiers below, written for `:root` alone, do not reach it.
 */
:root,
body[data-print="true"] #canvas {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  --paper: #ffffff;
  --ink: #1c1c1e;
  --wall-fill: #ebebed;
  /* Full strength on paper; the dark palette softens it a step, the pure
     tone glows too loudly on a dark ground. */
  --accent: #f76707;
  /* Delete and errors. A warm red near the accent's hue; crimson leans pink
     and clashed with the orange. Dark gets a brighter step of the same tone. */
  --danger: #c8402b;
  /* Words and facts. 65 % of the ink reads 5.3:1 on paper and 6.7:1 on the
     dark ground, above the 4.5:1 small text needs; 55 % gave 3.8:1. */
  --muted: color-mix(in srgb, currentColor 65%, transparent);
  --rule: color-mix(in srgb, currentColor 20%, transparent);
  /* The air between things, in steps of 0.15rem, then a wider rung for the
     start page, whose list stands further apart than a panel's rows. A value
     off the ladder is a decision that has to be argued for in a comment. */
  --space-1: 0.15rem;
  --space-2: 0.3rem;
  --space-3: 0.45rem;
  --space-4: 0.6rem;
  --space-5: 0.9rem;
  --space-6: 1.35rem;
  /* The pieces of the iOS style, see docs/agents/design/2026-10-14-ios-stil.md.
     Glass: paper at 72 % over a blurred background, a light rim inside and a
     soft shadow below, no drawn border. The layered inset shadows of the rim
     follow --f7-glass-shadow of Framework7 9.2.0 (MIT License, Copyright
     2014-2026 Vladimir Kharlampidi), without its grey 0.5 px line. */
  --glass: color-mix(in srgb, var(--paper) 72%, transparent);
  --glass-blur: blur(18px) saturate(1.6);
  --glass-rim:
    inset -1px -1px 0 -0.5px #fff, inset 1px 1px 0 -0.5px #fff,
    inset 3px 3px 10px -3px rgb(0 0 0 / 0.07), inset -3px -3px 10px -3px rgb(0 0 0 / 0.07),
    inset 0 0 5px 1px rgb(255 255 255 / 0.7), inset 0 0 24px 0 rgb(0 0 0 / 0.04);
  --glass-shadow: var(--glass-rim), 0 4px 18px rgb(0 0 0 / 0.12);
  --sheet-shadow: var(--glass-rim), 0 10px 40px rgb(0 0 0 / 0.16);
  /* Fills inside glass: the track of a segment, the group of a list, a quiet
     button. Mixed from the ink, so they follow either palette. */
  --fill: color-mix(in srgb, var(--ink) 7%, transparent);
  --fill-strong: color-mix(in srgb, var(--ink) 12%, transparent);
  --hairline: color-mix(in srgb, var(--ink) 13%, transparent);
  /* Was auf dem Akzent steht, ist in beiden Paletten dasselbe dunkle Grau: der
     Akzent ist hell in Hell und heller in Dunkel, und Weiß darauf liest sich mit
     3,0 : 1. Das dunkle Grau kommt auf 5,59 : 1 (hell) und 6,61 : 1 (dunkel).
     Auf dem Rot der Gefahr gilt es nicht -- dort sind es 3,4 : 1. Das Rot ist in
     Hell dunkel und in Dunkel heller, es kippt also mit der Palette, und was
     darauf steht, ist das Papier: 4,97 : 1 (hell) und 4,80 : 1 (dunkel). Weiß
     in beiden Fällen fiel in Dunkel auf 3,70 : 1. */
  --on-accent: #1c1c1e;
  --on-danger: var(--paper);
  /* Der Akzent als Schrift auf hellem Grund: reines Orange liest sich dort mit
     2,1 bis 3,0 : 1. Mit zwei Fünfteln Tinte sind es 5,3 auf einer Kachel und
     6,1 auf Papier -- und in Dunkel hellt dieselbe Mischung auf, weil die Tinte
     dort hell ist.

     Die Regel dahinter gilt im ganzen Rahmenwerk, damit nicht zwei Orange
     nebeneinanderstehen: eine *Fläche* trägt den Akzent selbst und darauf
     `--on-accent`; alles, was der Akzent *zeichnet* -- Schrift, Zeichen,
     Ränder --, trägt `--accent-text`. In der Zeichnung gilt das nicht: dort ist
     der Akzent die Farbe der Auswahl auf weißem Blatt. */
  --accent-text: color-mix(in srgb, var(--accent) 60%, var(--ink));
  --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);
  --danger-tint: color-mix(in srgb, var(--danger) 13%, transparent);
  /* The chosen part of a segment: a raised pill. */
  --segment-on: var(--paper);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #16181c;
    --ink: #e8e8ea;
    --wall-fill: #2c313a;
    --accent: #f0854a;
    --danger: #e2573f;
    --glass-rim:
      inset -1px -1px 0 -0.5px rgb(255 255 255 / 0.3), inset 1px 1px 0 -0.5px rgb(255 255 255 / 0.3),
      inset 0 0 5px 1px rgb(0 0 0 / 0.25), inset 0 0 12px 0 rgb(255 255 255 / 0.05);
    --glass-shadow: var(--glass-rim), 0 4px 18px rgb(0 0 0 / 0.35);
    --sheet-shadow: var(--glass-rim), 0 10px 40px rgb(0 0 0 / 0.45);
    --segment-on: color-mix(in srgb, var(--ink) 22%, var(--paper));
  }
}
/* The same dark values again: CSS cannot name a group of declarations and
   apply it under two conditions, and a build step for that is the worse trade. */
:root[data-theme="dark"] {
  --paper: #16181c;
  --ink: #e8e8ea;
  --wall-fill: #2c313a;
  --accent: #f0854a;
  --danger: #e2573f;
  --glass-rim:
    inset -1px -1px 0 -0.5px rgb(255 255 255 / 0.3), inset 1px 1px 0 -0.5px rgb(255 255 255 / 0.3),
    inset 0 0 5px 1px rgb(0 0 0 / 0.25), inset 0 0 12px 0 rgb(255 255 255 / 0.05);
  --glass-shadow: var(--glass-rim), 0 4px 18px rgb(0 0 0 / 0.35);
  --sheet-shadow: var(--glass-rim), 0 10px 40px rgb(0 0 0 / 0.45);
  --segment-on: color-mix(in srgb, var(--ink) 22%, var(--paper));
}
/* A chosen theme has to reach what the variables do not: form controls, the
   scrollbar, the canvas behind the page. */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}