/* Design tokens for williamdemeo.github.io -- the one place colour, type and
 * spacing are decided.  extra.css consumes these and defines no raw values of
 * its own, so a change here moves the whole site and nothing else has to know.
 *
 * The active system is Constellation: the palette and Space Grotesk display
 * face of the agda-algebras documentation site.  The two sites link to each
 * other constantly and now look like siblings, which is worth more here than
 * each having a separate voice.
 *
 * Meridian, below, is the alternative, and is what #17 first settled on -- a
 * near-achromatic neutral ramp with a teal accent, Newsreader for display.  It
 * is kept because the comparison is the point: /design/options/ renders both,
 * and the choice was made by looking rather than by reading.
 *
 * Switching the whole site is three edits, all in this file, and they are the
 * three bare selectors below -- the ones with no `[data-system]` on them.
 * Move each from the active block to the other one:
 *
 *     :root,                              (before the font block)
 *     [data-md-color-scheme="default"],   (before the light colour block)
 *     [data-md-color-scheme="slate"],     (before the dark colour block)
 *
 * Nothing else changes; the `[data-system="…"]` selectors stay where they are,
 * because /design/options/ uses them to render both systems on one page.  Do
 * move all three -- moving two produces a selector like
 * `[data-md-color-scheme="default"]:root`, which matches nothing, and the page
 * comes back with no colours at all.
 *
 * Units: Material sets `html { font-size: 125% }`, so 1rem is 20px, and
 * `.md-typeset` sizes in em relative to its own base.  The scale below follows
 * that convention rather than fighting it.
 */

/* ══ scale, spacing and shape ══════════════════════════════════════════════
 *
 * System-independent.  A 1.25 modular scale, tightened at the display sizes
 * where a straight geometric progression gets shouty, and a 4px spacing grid.
 */

:root {
  /* Type scale, em-relative to the typeset base.  h1 lands at 38px, body 17px. */
  --type-base: 0.85rem;      /* 17px */
  --type-h1: 2.25em;
  --type-h2: 1.5em;
  --type-h3: 1.1875em;
  --type-h4: 1em;
  --type-small: 0.8125em;
  --type-code: 0.875em;
  /* Interface chrome sizes in rem, not em: the nav and the table of contents
     are outside .md-typeset, so an em there resolves against the root and
     compounds down the tree. */
  --type-ui: 0.7rem;
  --type-ui-small: 0.62rem;

  --leading-body: 1.7;
  --leading-heading: 1.25;
  --tracking-display: -0.02em;   /* large type needs to be pulled in */
  --tracking-body: 0;
  --tracking-caps: 0.06em;

  /* Line length.  Prose is capped; code blocks, tables and figures are not,
     because an 80-column Agda block that wraps is worse than a wide one. */
  --measure: 33rem;              /* ~74 characters at the body size */
  --measure-heading: 38rem;

  /* The height the home hero holds open (#93).  Its second column holds the
     typed-proof terminal (M3-2d, #96); the floor keeps the stage from
     collapsing to the copy's height while the terminal is shorter than the
     copy, and the value is what the 440x370 portrait used to establish at
     full content width. */
  --hero-stage: 20rem;

  /* One knob for the size of the hero's lattices (#140).  Each lattice
     scales about its own centre, so the composition keeps its slots and
     only the diagrams change: the gaps are 61 and 46 viewBox units at 1,
     and they close at about 1.37 and 1.26.  L₇ stays clear of the
     typed-proof terminal's panel until about 2.2, so the gap between it and
     M₃ is what binds, not the panel.  Below 1 the gaps open instead.
     Stars, strokes and labels scale with the diagrams, exactly as they do
     when the viewport scales the drawing.  It is a plain custom property,
     so devtools can turn it live; settling on a value other than 1 is a cue
     to re-space the composition in the snippet and return this to 1, rather
     than to ship the knob turned. */
  --lattice-scale: 1.1;

  /* How present the drawing is (#140).  1 is the strength the component
     shipped with: lines at full opacity in --c-line-strong, a lit star at
     0.95, its halo at 0.14.  This multiplies all three, so the drawing
     fades as one thing.  The labels are deliberately outside it: the
     contrast audit folds element opacity into the foreground colour, so a
     faded label would fail AA where a faded circle cannot. */
  --lattice-ink: 0.75;

  /* 4px grid at a 20px root. */
  --space-1: 0.2rem;
  --space-2: 0.4rem;
  --space-3: 0.6rem;
  --space-4: 0.8rem;
  --space-6: 1.2rem;
  --space-8: 1.6rem;
  --space-12: 2.4rem;
  --space-16: 3.2rem;
  --space-24: 4.8rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --border-width: 1px;

  /* Motion (ADR-009).  Every duration, delay and easing an animation uses is
     one of these; a new animation that needs a new number adds a token here,
     visibly, rather than burying a constant in extra.css.  The values only
     apply under `prefers-reduced-motion: no-preference` -- the reduced-motion
     rendering is the final state, not a slower version of the journey. */
  --motion-draw: 1s;            /* one line of a constellation drawing in    */
  --motion-pop: 0.5s;           /* one star appearing                        */
  --motion-stagger: 0.08s;      /* per-element offset in a drawn sequence    */
  --motion-label: 1.2s;         /* captions fading up after the drawing      */
  --motion-twinkle: 7s;         /* full period of the idle shimmer           */
  --motion-halo-lag: 0.2s;      /* a halo blooms this long after its star    */
  /* The two choreography anchors.  Both are derived from the drawing's last
     line, --i:27 in hero-constellation.html: labels enter as it starts
     (27 x the 0.08s stagger = 2.16s), the idle shimmer waits for it to land
     (2.16s + the 1s draw = 3.16s).  A lattice added to or removed from the
     constellation moves the highest --i, and these two move with it: #140
     swapped 𝟚³ (twelve lines) for M₄ (eight), so both came down by a third
     of a second.  (The drawing ran at 0.12s/1.4s until the typed-proof
     terminal joined the hero; the quicker hand lets the whole constellation
     land well before the terminal's entrance below.) */
  --motion-labels-at: 2.2s;
  --motion-twinkle-at: 3.2s;
  --motion-count: 0.9s;         /* a figure counting up to its value         */
  /* A card's preview arriving under it (M3-3b, #97).  The movement carries
     information rather than decorating: the panel emerges from beneath its
     own card, which is what says whose preview it is when it opens across
     the card below.  Short on purpose, because it answers a pointer that is
     already moving, and anything slower than about a sixth of a second is
     felt as the page lagging the hand.  Under reduced motion there is no
     entrance at all: the preview is simply there, which is the final state. */
  --motion-preview: 0.15s;      /* a card's preview arriving under it        */
  /* The typed-proof replay (M3-2d, #96).  One token per beat of the session:
     the per-glyph delay is ~31 glyphs a second -- unhurried, practiced
     typing -- and proof.js jitters each keystroke +-40% around it so the
     rhythm reads as a hand rather than a metronome.  The goal beat, the
     pause while an open goal sits in the HUD, is --motion-label's 1.2s: a
     caption is read, a goal is read, one tempo.  The check beat, the settle
     before the compiler speaks, is --motion-pop's 0.5s.  The caret's 1s
     period is Emacs' default (blink-cursor-interval 0.5s, half on, half
     off) -- the blink every Agda session actually has. */
  --motion-type: 32ms;          /* one glyph of the proof replay typing in   */
  --motion-goal-beat: 1.2s;     /* an open goal, read before the fill        */
  --motion-check-beat: 0.5s;    /* zero goals settling before the ✓ line     */
  --motion-caret: 1s;           /* the replay caret's blink period           */
  /* The terminal's entrance, and the dwell between lemmas.  The entrance was
     the drawing's landing exactly: the overture finishes, the second voice
     enters.  It is now that landing (3.16s) plus a held beat, on purpose.
     The panel is opaque, and what it covers is L₇ and the right half of M₄,
     so the seconds before it arrives are the only ones in which the whole
     chart is readable; #140 bought a little under a second of them.  Move
     the drawing's tempo and this moves with it, hold included.  The dwell
     keeps its own 3s: the held beat between finished lemmas was chosen as a
     reading pause, not an echo of the entrance. */
  --motion-hero-enter: 4s;      /* the proof terminal waiting its turn       */
  --motion-tab-dwell: 3s;       /* a finished lemma holding the stage        */
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ══ Meridian -- alternative ═══════════════════════════════════════════════
 *
 * A neutral sans for reading, a serif for display, and one cool accent.  The
 * greys carry a trace of blue so that pure-black code on pure-white paper --
 * the combination that makes long reading tiring -- never occurs.
 */

[data-system="meridian"] {
  --font-body: "Inter";
  --font-display: "Newsreader";
  --font-mono: "JuliaMono";

  /* Both systems read in Inter, so both carry the same measured ratio; see the
     Constellation block for where 1.27 comes from. */
  --math-scale: 1.27em;
  --display-weight: 500;
  --strong-weight: 600;
}

[data-md-color-scheme="default"][data-system="meridian"] {
  --c-bg: #ffffff;
  --c-bg-raised: #f4f5f5;
  --c-bg-sunken: #eceeee;
  --c-fg: #14181a;
  --c-fg-muted: #596265;
  --c-fg-faint: #626b6e;
  --c-line: #e1e4e4;
  --c-line-strong: #c8cdcd;
  --c-accent: #0f766e;
  --c-accent-hover: #0b544e;
  --c-accent-wash: #e6f2f0;
  --c-on-accent: #ffffff;
  --c-error: #b3261e;
}

[data-md-color-scheme="slate"][data-system="meridian"] {
  --c-bg: #0b0e0f;
  --c-bg-raised: #13181a;
  --c-bg-sunken: #080a0b;
  --c-fg: #e3e7e8;
  --c-fg-muted: #94a0a3;
  --c-fg-faint: #7d888b;
  --c-line: #212829;
  --c-line-strong: #333c3e;
  --c-accent: #5eead4;
  --c-accent-hover: #99f6e4;
  --c-accent-wash: #10211f;
  --c-on-accent: #06201d;
  --c-error: #ff8a80;
}


/* ══ Constellation -- active ═══════════════════════════════════════════════
 *
 * The visual system of the agda-algebras documentation site
 * (agda-algebras.universalalgebra.org), which is also MkDocs Material: indigo
 * primary, coral accent, Space Grotesk for display over Inter for body.  It
 * ships here because the two sites link to each other constantly, and looking
 * like siblings is worth more than each having a separate voice.
 *
 * The values are that site's own, read out of its `stylesheets/custom.css`,
 * with three exceptions.  Measured against `make contrast-audit`'s thresholds
 * they fail as text, so they are adjusted here rather than adopted broken.
 * These three are the only places the two sites deliberately differ, and the
 * difference is reported upstream rather than hidden:
 *
 *   --c-fg-faint  light   #818bab -> #626b88   3.29:1 -> 5.15:1 on paper
 *   --c-fg-faint  dark    #6a7197 -> #8189af   3.70:1 -> 5.14:1 on the raised surface
 *   --c-accent-hover light #fb6a00 -> #b34b00  2.86:1 -> 5.22:1 on paper
 *
 * The coral survives unchanged in dark, where it is 7.34:1; it is only on
 * paper that a saturated orange cannot carry text.
 */

:root,
[data-system="constellation"] {
  --font-body: "Inter";
  --font-display: "Space Grotesk";
  --font-mono: "JuliaMono";
  /* Inline mathematics is set in KaTeX_Main, whose x-height is 0.431 em
     against Inter's 0.546.  KaTeX ships 1.21em to compensate; 0.546/0.431 is
     1.267, so this is the value that actually equalises the two x-heights.
     Meridian reads in Inter too, so it carries the same number. */
  --math-scale: 1.27em;
  --display-weight: 600;
  --strong-weight: 600;
}

[data-md-color-scheme="default"],
[data-md-color-scheme="default"][data-system="constellation"] {
  --c-bg: #fbfcff;
  --c-bg-raised: #f2f5fb;
  --c-bg-sunken: #eef0fc;
  --c-fg: #181c2c;
  --c-fg-muted: #535d75;
  --c-fg-faint: #626b88;
  --c-line: #e2e4f6;
  --c-line-strong: #ccd0ec;
  --c-accent: #5b54e6;
  --c-accent-hover: #b34b00;
  --c-accent-wash: #ecebfd;
  --c-on-accent: #ffffff;
  /* KaTeX renders a failed expression in errorColor, inline.  Its default
     #cc0000 is legible on paper and 3.29:1 on the dark page, so it is a token
     rather than a constant; katex-init.js passes `var(--c-error)` straight
     through into the inline style. */
  --c-error: #b3261e;
}

[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"][data-system="constellation"] {
  --c-bg: #0c0e1d;
  --c-bg-raised: #15172e;
  --c-bg-sunken: #08091a;
  --c-fg: #c3c8de;
  --c-fg-muted: #9197b6;
  --c-fg-faint: #8189af;
  --c-line: #22253f;
  --c-line-strong: #333757;
  --c-accent: #8b88ff;
  --c-accent-hover: #ff7a1a;
  --c-accent-wash: #16183a;
  --c-on-accent: #0c0e1d;
  --c-error: #ff8a80;
}