/* ==========================================================================
   Colour Science & Perception — tokens.
   ==========================================================================

   The structural stylesheet is essay-kit's base.css, loaded first. Everything
   below is this site's identity and nothing else.

   THE PAGE IS DELIBERATELY ACHROMATIC, and on this site that is an argument
   rather than a taste. A patch of colour has no fixed appearance: it is shifted
   by whatever surrounds it, which is simultaneous contrast and is the subject of
   an entire field here. Chrome with any chroma in it would bias every swatch on
   every page, in a direction that varies with where the swatch sits in the
   layout. So --paper and --ink are exactly neutral — equal in all three
   channels, verified in `colourcheck` — and the only colour on a page is the
   colour a figure computed. It costs the site some warmth. It buys every figure
   the right to be judged.

   Accents appear as annotation, never as area. The five semantic roles below are
   darkened members of the Okabe–Ito qualitative palette, chosen for text
   contrast; figures draw data series from --series-1..8, which are the canonical
   Okabe–Ito values. That palette is the standard recommendation for
   colour-vision-deficient readers, and this is the one site in the fleet with
   the machinery to check the claim rather than repeat it — `colourcheck` runs
   every pair through the Brettel–Viénot and Machado simulations and asserts the
   separations survive. See lib/vision.js.
   ========================================================================== */

:root {
  --paper:   #f6f6f6;
  --paper-2: #efefef;
  --paper-3: #e3e3e3;
  --ink:     #1a1a1a;
  --ink-2:   #4a4a4a;
  --ink-3:   #5f5f5f;
  --rule:    #d2d2d2;
  --rule-2:  #e6e6e6;
  --rule-3:  #e6e6e6;

  /* Semantic roles — darkened Okabe–Ito, contrast-safe against --paper. */
  --c-a: #0072b2;   /* a measured quantity, and axes that carry one */
  --c-b: #9e4600;   /* the second of any pair being compared */
  --c-c: #00695a;   /* inside the gamut: reachable, therefore honest */
  --c-d: #7a5b00;   /* a marked level, threshold or chosen value */
  --c-e: #8a4f86;   /* structure: loci, boundaries, constructions */
  --c-warn: #b3261e; /* outside the gamut, and failures generally */

  /* Canonical Okabe–Ito, for data series inside figures. Not for text. */
  --series-1: #0072b2;
  --series-2: #d55e00;
  --series-3: #009e73;
  --series-4: #e69f00;
  --series-5: #56b4e9;
  --series-6: #cc79a7;
  --series-7: #f0e442;
  --series-8: #000000;

  /* The three cone classes. Long, medium, short — never "red, green, blue",
     which is wrong about all three and is its own essay. */
  --cone-l: #d55e00;
  --cone-m: #009e73;
  --cone-s: #0072b2;

  --fig-ink:   var(--ink);
  --fig-soft:  #6b6b6b;
  --fig-faint: #c9c9c9;

  --tint: 15%;
  --tint-strong: 30%;

  --font-body: Georgia, "Nimbus Roman", "Liberation Serif", "Times New Roman", serif;
  --font-display: var(--font-body);
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 8px 24px -14px rgb(0 0 0 / 28%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #141414;
    --paper-2: #1d1d1d;
    --paper-3: #282828;
    --ink:     #ececec;
    --ink-2:   #b8b8b8;
    --ink-3:   #9c9c9c;
    --rule:    #383838;
    --rule-2:  #232323;
    --rule-3:  #232323;

    --c-a: #56b4e9;
    --c-b: #e69f00;
    --c-c: #3fcfa5;
    --c-d: #f0e442;
    --c-e: #cc79a7;
    --c-warn: #ff8a80;

    --fig-ink:   #ececec;
    --fig-soft:  #9a9a9a;
    --fig-faint: #3a3a3a;

    --tint: 22%;
    --tint-strong: 38%;
    --shadow: 0 1px 2px rgb(0 0 0 / 46%), 0 12px 34px -16px rgb(0 0 0 / 78%);
  }
}

:root[data-theme="dark"] {
  --paper:   #141414;
  --paper-2: #1d1d1d;
  --paper-3: #282828;
  --ink:     #ececec;
  --ink-2:   #b8b8b8;
  --ink-3:   #9c9c9c;
  --rule:    #383838;
  --rule-2:  #232323;
  --rule-3:  #232323;

  --c-a: #56b4e9;
  --c-b: #e69f00;
  --c-c: #3fcfa5;
  --c-d: #f0e442;
  --c-e: #cc79a7;
  --c-warn: #ff8a80;

  --fig-ink:   #ececec;
  --fig-soft:  #9a9a9a;
  --fig-faint: #3a3a3a;

  --tint: 22%;
  --tint-strong: 38%;
  --shadow: 0 1px 2px rgb(0 0 0 / 46%), 0 12px 34px -16px rgb(0 0 0 / 78%);
}

/* --- site-specific roles -------------------------------------------------- */

/* A swatch is the one place on this site where a colour is the content rather
   than the annotation, so its fill is written inline by the generator and must
   never be overridden here. What the stylesheet supplies is the frame: a hairline
   in the neutral rule colour, because a coloured border would shift the patch it
   surrounds and that is precisely the effect under discussion elsewhere. */
.fig-svg .swatch { stroke: var(--rule); stroke-width: 1; }
.fig-svg .swatch-bare { stroke: none; }

/* Out of gamut. The hatch is the site's central admission: no value this display
   can accept is the colour that belongs at these coordinates, so the region is
   marked rather than filled with the nearest lie. */
.fig-svg .oog { fill: url(#oog-hatch); stroke: none; }
.fig-svg .oog-line { stroke: var(--c-warn); stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; }
.fig-svg text.oog-label { fill: var(--c-warn); stroke: none; }

/* The spectral locus and the purple line that closes it — a boundary of what is
   visible, not of what is displayable, and the two are constantly confused. */
.fig-svg .locus { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.fig-svg .purple-line { stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-dasharray: 4 3; }

/* A gamut boundary: the triangle a set of primaries can reach. */
.fig-svg .gamut { stroke: var(--c-c); stroke-width: 1.8; fill: none; }
.fig-svg .gamut-2 { stroke: var(--c-e); stroke-width: 1.6; fill: none; stroke-dasharray: 7 4; }
.fig-svg .gamut-fill { fill: color-mix(in oklab, var(--c-c) 8%, transparent); stroke: none; }
.fig-svg .white-point { fill: var(--ink); stroke: var(--paper); stroke-width: 1.4; }

/* Spectral power distributions, and the three cone fundamentals. */
.fig-svg .spd { stroke: var(--c-a); stroke-width: 2; fill: none; }
.fig-svg .spd-2 { stroke: var(--c-b); stroke-width: 2; fill: none; }
.fig-svg .spd-fill { fill: color-mix(in oklab, var(--c-a) var(--tint), var(--paper-2)); stroke: none; }
.fig-svg .spd-fill-2 { fill: color-mix(in oklab, var(--c-b) var(--tint), var(--paper-2)); stroke: none; }
.fig-svg .cone-l { stroke: var(--cone-l); stroke-width: 2; fill: none; }
.fig-svg .cone-m { stroke: var(--cone-m); stroke-width: 2; fill: none; }
.fig-svg .cone-s { stroke: var(--cone-s); stroke-width: 2; fill: none; }

/* A colour-matching function where it goes negative — the physically awkward
   region that is the whole reason XYZ exists. */
.fig-svg .negative-lobe { fill: color-mix(in oklab, var(--c-warn) 14%, var(--paper-2)); stroke: none; }

/* A claim under test, and one that failed. */
.fig-svg .measured   { stroke: var(--c-d); stroke-width: 2.2; fill: none; }
.fig-svg .refuted    { stroke: var(--c-warn); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.fig-svg text.refuted { fill: var(--c-warn); stroke: none; }

/* Axes and general furniture. */
.fig-svg .axis       { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg .grid       { stroke: var(--fig-faint); stroke-width: 0.9; }
.fig-svg .soft       { stroke: var(--fig-soft); stroke-width: 1.2; fill: none; }
.fig-svg .faint      { stroke: var(--fig-faint); stroke-width: 1; fill: none; }
.fig-svg .dot-a      { fill: var(--c-a); stroke: none; }
.fig-svg .dot-b      { fill: var(--c-b); stroke: none; }
.fig-svg .dot-d      { fill: var(--c-d); stroke: none; }
.fig-svg .dot-e      { fill: var(--c-e); stroke: none; }
.fig-svg .dot-warn   { fill: var(--c-warn); stroke: none; }
.fig-svg .fill-a     { fill: color-mix(in oklab, var(--c-a) var(--tint), var(--paper-2)); }
.fig-svg .fill-b     { fill: color-mix(in oklab, var(--c-b) var(--tint), var(--paper-2)); }
.fig-svg .fill-d     { fill: color-mix(in oklab, var(--c-d) var(--tint), var(--paper-2)); }
.fig-svg .fill-e     { fill: color-mix(in oklab, var(--c-e) var(--tint), var(--paper-2)); }
.fig-svg text.mono   { font-family: var(--font-mono); }

/* A diagram <text> must not inherit the root stroke, or every label is drawn
   twice and reads as bold mud. Fleet-wide gotcha, cheap to state, easy to lose. */
.fig-svg text { stroke: none; }

/* A rule under section headings. */
.section-head::after { border-top-style: solid; }

/* --- dragging a parameter -------------------------------------------------
   Every frame was produced at build time by the same generator, so every frame
   passed the same assertions. The control sits under the caption, outside the
   SVG, so the figure keeps role="img" and the page reads correctly with the
   script absent. */
.drag-row { margin: 0.6rem 0 0; display: grid; gap: 0.35rem; }
.drag-slider { width: min(28rem, 100%); accent-color: var(--c-a); cursor: ew-resize; }
.drag-slider:focus-visible { outline: 2px solid var(--c-a); outline-offset: 3px; }
.drag-readout {
  margin: 0; font: 0.8rem/1.4 var(--font-ui); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.drag-note { margin: 0; font: 0.74rem/1.4 var(--font-ui); color: var(--ink-3); }

/* --- the wide-gamut probe --------------------------------------------------
   The one place the page asks the display a question. Both patches carry the
   same sRGB fallback, so on an sRGB screen they are identical and the reader
   sees one rectangle. Where display-p3 is supported AND the panel can actually
   reach beyond sRGB, the second patch moves and a seam appears. A visible seam
   is a wide-gamut display; no seam is sRGB, or a browser not managing colour.
   Nothing here can distinguish those last two, and the essay says so. */
.fig-svg .p3-ref,
.fig-svg .p3-test { fill: rgb(224 32 32); stroke: none; }
@supports (color: color(display-p3 1 0 0)) {
  .fig-svg .p3-test { fill: color(display-p3 0.94 0.02 0.02); }
}