/* ============================================================================
   theme.css — the dark-mode layer and the figure token layer.

   Loads after ds.css and redefines its tokens as light-dark() pairs, so every
   component in the system gains a dark theme without ds.css being touched.

   A Swiss system inverts cleanly: the ground and the ink simply trade places.
   The one value that cannot just be flipped is the red — #e30613 is 5.0:1 on
   white but only 3.5:1 on near-black, which is not enough for running text. The
   dark theme lifts it to #ff4a52, which measures about 5.7:1 on the dark ground.
   ========================================================================= */

/* No attribute → follow the operating system. [data-theme] → the visitor chose.
   `color-scheme` is what light-dark() reads, and it also themes form controls,
   scrollbars and the range tracks inside the widgets. */
:root                     { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root {
  --color-bg:       light-dark(#ffffff, #111111);
  --color-surface:  light-dark(#f4f4f4, #1c1c1c);
  --color-text:     light-dark(#111111, #f5f5f3);
  --color-accent:   light-dark(#e30613, #ff4a52);
  --color-accent-2: light-dark(#e30613, #ff4a52);
  --color-divider:  light-dark(#111111, #f5f5f3);
  --color-rule-soft:light-dark(#d4d4d4, #3a3a3a);

  --color-neutral-100: light-dark(#fafafa, #191919);
  --color-neutral-200: light-dark(#f0f0f0, #232323);
  --color-neutral-300: light-dark(#e2e2e2, #303030);
  --color-neutral-400: light-dark(#c9c9c9, #464646);
  --color-neutral-500: light-dark(#9a9a9a, #6d6d6d);
  --color-neutral-600: light-dark(#767676, #969696);
  --color-neutral-700: light-dark(#555555, #b8b8b8);
  --color-neutral-800: light-dark(#333333, #dcdcdc);
  --color-neutral-900: light-dark(#111111, #f5f5f3);

  --color-accent-100: light-dark(#ffeaec, #3d0d10);
  --color-accent-200: light-dark(#ffc9cd, #5c1216);
  --color-accent-300: light-dark(#ff9aa2, #85191f);
  --color-accent-400: light-dark(#f95560, #b3242c);
  --color-accent-500: light-dark(#e30613, #e33e46);
  --color-accent-600: light-dark(#c60510, #ff4a52);
  --color-accent-700: light-dark(#a5040d, #ff6c73);
  --color-accent-800: light-dark(#7a030a, #ff9aa0);
  --color-accent-900: light-dark(#4d0206, #ffd0d3);

  --shadow-sm: none;
  --shadow-md: 0 0 0 1px var(--color-text);
  --shadow-lg: 0 0 0 2px var(--color-text);
}

/* --- the figure token layer ---------------------------------------------
   Every diagram on this site is inline SVG. None of it carries a hard-coded
   colour, or dark mode would invert the page and leave the drawings behind.

   These tokens are consumed through CSS CLASSES (.dgm-*), never through
   `stroke="var(--fig-axis)"`: var() inside an SVG presentation attribute is
   unreliable in Safari, because presentation attributes are parsed on a
   different path from the style cascade. */
:root {
  --fig-axis:         var(--color-text);
  --fig-constr:       var(--color-neutral-500);
  --fig-subject:      var(--color-accent);
  --fig-subject-deep: var(--color-accent);
  --fig-plane-stroke: var(--color-text);
  --fig-plane-fill:   color-mix(in srgb, var(--color-accent) 9%, transparent);
  --fig-plane-fill-2: color-mix(in srgb, var(--color-text) 7%, transparent);
  --fig-label:        var(--color-accent);
  --fig-label-muted:  var(--color-neutral-700);
  --fig-label-faint:  var(--color-neutral-600);
  --fig-good:         light-dark(#0f7a3d, #4ecb7d);
  --fig-bad:          var(--color-accent);
}

/* Diagram primitives. Heavier strokes than an editorial system would use —
   in this language a hairline reads as an accident. */
.dgm            { display: block; width: 100%; height: auto; background: transparent; }
.dgm text       { font-family: var(--font-body); font-size: 12px; font-weight: 500; fill: var(--fig-label-muted); }
/* Symbols are mathematics, so they are set like the equations rather than like
   the interface: a serif italic, matching what MathJax renders on the page. */
.dgm .sym, .dgm text.sym {
  font-family: 'Latin Modern Math', 'Cambria Math', Cambria, Georgia, 'Times New Roman', serif;
  font-style: italic; font-size: 1.15em;
}
.dgm .t-sym     { font-style: italic; fill: var(--fig-label); }
.dgm .t-faint   { fill: var(--fig-label-faint); }
.dgm .t-subject { fill: var(--fig-subject); font-weight: 600; }

.dgm-axis       { stroke: var(--fig-axis); stroke-width: 1; fill: none; }
.dgm-axis-head  { fill: var(--fig-axis); stroke: none; }
.dgm-constr     { stroke: var(--fig-constr); stroke-width: .9; stroke-dasharray: 4 4; fill: none; }
.dgm-grid       { stroke: var(--fig-constr); stroke-width: .6; opacity: .45; fill: none; }
/* Coordinate lines, aligned to the integers — a touch stronger than a plane's
   rulings, because they carry meaning rather than shape. */
.dgm-coord      { stroke: var(--fig-constr); stroke-width: .7; opacity: .38; fill: none; }
.dgm-subject    { stroke: var(--fig-subject); stroke-width: 1.6; fill: none; }
.dgm-subject-2  { stroke: var(--fig-subject); stroke-width: 1.3; fill: none; stroke-dasharray: 6 4; }
.dgm-hidden     { stroke: var(--fig-subject); stroke-width: 1.1; fill: none; stroke-dasharray: 4 5; opacity: .5; }
.dgm-plane      { fill: var(--fig-plane-fill); stroke: var(--fig-plane-stroke); stroke-width: 1; }
.dgm-plane-back { fill: var(--fig-plane-fill-2); stroke: var(--fig-plane-stroke); stroke-width: 1; opacity: .75; }
/* An arrowhead means "this is a vector". Lines never get one. */
.dgm-normal       { stroke: var(--fig-subject); stroke-width: 1.4; fill: none; }
.dgm-fill-normal  { fill: var(--fig-subject); stroke: none; }
.dgm-fill-subject { fill: var(--fig-subject); stroke: none; }
.dgm-fill-axis    { fill: var(--fig-axis); stroke: none; }
.dgm-fill-constr  { fill: var(--fig-constr); stroke: none; }
.dgm-dot        { fill: var(--fig-subject); stroke: none; }
.dgm-dot-open   { fill: var(--color-bg); stroke: var(--fig-subject); stroke-width: 1.3; }
.dgm-good       { stroke: var(--fig-good); fill: none; stroke-width: 2; }
.dgm-bad        { stroke: var(--fig-bad);  fill: none; stroke-width: 2; }
/* Painted under a stroke that passes in FRONT, to break the one behind it.
   This is how a skew pair is told apart from a crossing pair. */
.dgm-casing     { stroke: var(--color-bg); stroke-width: 5; fill: none; }

/* Figures sit inside a hard frame with a little air, never a mat. */
.plate-fig { padding: 10px; background: var(--color-bg); }

/* MathJax renders its glyphs as <path fill="currentColor">, so typeset
   mathematics inherits --color-text and inverts with the page for free. A long
   display equation must be able to scroll rather than overflow its column. */
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
mjx-container svg { max-width: none; }