/* ============================================================ COLOR — ink on rag paper. Read from the rendered hero: warm greige paper, dark bistre ink, a single burnt-orange (sanguine) accent, and the warm brown of foxing stains. Tone is built by mixing ink INTO paper (color-mix), never by opacity over a void. ============================================================ */ :root{ /* --- base pigments --- */ --ink: #2a2013; /* dark bistre — the plate ink */ --paper: #f3edd7; /* warm greige rag paper */ --paper-hi: #f8f2de; /* brighter sheet — raised surfaces, inputs */ --paper-lo: #ebe3c8; /* pressed sheet — wells, insets */ --sanguine: #c6622f; /* burnt-orange accent — used sparingly */ --foxing: #6b4521; /* age-stain brown — decorative only */ /* --- ink diluted into paper (the tonal ramp) --- */ --ink-90: color-mix(in srgb, var(--ink) 90%, var(--paper)); --ink-80: color-mix(in srgb, var(--ink) 80%, var(--paper)); /* 70 is the ramp's accessibility step: the FIRST dilution that still clears 4.5:1 against every scheme's paper, so it is where small text that wants to read quiet has to stop (5.75 / 5.37 / 4.86 / 5.10 / 6.50:1 over --paper-hi). --code-comment claimed it first; --text-faint — the whole theme's label register — now stands on it too, which is what makes 70 the ramp's floor rather than one token's private step. */ --ink-70: color-mix(in srgb, var(--ink) 70%, var(--paper)); --ink-60: color-mix(in srgb, var(--ink) 60%, var(--paper)); --ink-40: color-mix(in srgb, var(--ink) 40%, var(--paper)); --ink-30: color-mix(in srgb, var(--ink) 30%, var(--paper)); --ink-20: color-mix(in srgb, var(--ink) 20%, var(--paper)); --ink-12: color-mix(in srgb, var(--ink) 12%, var(--paper)); /* --- sanguine diluted --- */ --sanguine-ink: color-mix(in srgb, var(--sanguine) 80%, var(--ink)); /* pressed accent */ /* The accent as TEXT. Pure --sanguine is a PIGMENT, mixed for the eye, not for a 12px line: it measures 3.45 / 5.38 / 8.70 / 4.13 / 5.84:1 over --paper, so bistre and verdigris put every accent word — a link on hover, the § Members badge, a form's error message — under the floor. Stepping 30% into the ink keeps the hue (it still reads sanguine; on aquatint night the ink is pale, so the accent brightens instead of darkening, which is what that scheme wants) and clears every surface, which is the reason it is one step deeper than --code-machine's 80%: a code token only ever lands on --paper-hi, an accent word can land on any of the three. over --paper 5.20 / 7.20 / 9.44 / 5.73 / 7.55 over --paper-hi 5.44 / 7.67 / 9.93 / 6.04 / 6.87 over --paper-lo 4.75 / 6.54 / 8.49 / 5.19 / 8.17 (80% fell to 4.13 here) */ --sanguine-read: color-mix(in srgb, var(--sanguine) 70%, var(--ink)); --sanguine-60: color-mix(in srgb, var(--sanguine) 60%, var(--paper)); /* ============ semantic aliases ============ */ --surface-page: var(--paper); --surface-raised: var(--paper-hi); --surface-well: var(--paper-lo); /* The text ramp is four decade steps and it STOPS at 70, because 70 is where the floor is: every tone a reader is asked to read clears 4.5:1 against every scheme's paper. Ratios over --paper, in scheme order (bistre / iron gall / sanguine chalk / verdigris / aquatint night): strong 13.62 / 12.33 / 10.62 / 11.71 / 13.36 body 10.32 / 9.27 / 8.11 / 8.77 / 11.01 muted 7.54 / 6.82 / 6.11 / 6.49 / 8.94 faint 5.49 / 5.05 / 4.62 / 4.83 / 7.14 muted and faint sat at ink-60 and ink-40 until 2026-08-14, which measured 4.06 / 3.79 / 3.54 / 3.66 / 5.60 and 2.36 / 2.27 / 2.19 / 2.22 / 3.23 — i.e. the nav links, the footer links, every eyebrow, every date, the copyright line and the pigment picker's own label were all under the floor on the four light schemes, some of them at a quarter of it. Lifting one token and not the other would have left the register incoherent (the picker reading darker than the nav beside it), so both moved together. The two steps stay a real hierarchy because they answer to different typography: muted carries QUIET SENTENCES (deks, descriptions, the note apparatus), faint carries the MONO LABEL register — --step--2, uppercase, tracked — which reads optically lighter at the same ink, so the smaller step is the paler one and the ladder still descends. One caveat the numbers carry: faint clears on --paper (4.62 min) and --paper-hi (4.86 min) but dips to 4.16 / 4.38 on --paper-lo, the pressed sheet. Label-register text must not be set on a well; muted holds there (5.50 min) and is what a well takes. */ --text-strong: var(--ink); --text-body: var(--ink-90); --text-muted: var(--ink-80); --text-faint: var(--ink-70); --text-invert: var(--paper); --rule: var(--ink-30); /* hairline rules, plate insets */ --rule-strong: var(--ink); /* structural 1px borders */ --accent: var(--sanguine); /* the pigment: grounds, rules, marks */ --accent-pressed:var(--sanguine-ink); /* the same accent where it has to be READ — see --sanguine-read. Use this for accent WORDS (links on hover, badges, error messages); --accent stays the pigment you paint a ground or a rule with, where no glyph depends on it. One accent per view still holds: this is that accent, legible. */ --accent-text: var(--sanguine-read); /* code / machine tone — reserve accent for machine tokens. Every value here is small text on a code plate (--paper-hi), so every one of them answers to the 4.5:1 floor on all five schemes. The ladder that survives that — comment, string, body, keyword/name — is what keeps the block legible AS code: four distinct tones, each the quietest its role can be while clearing. Ratios below are over --paper-hi, in scheme order: bistre / iron gall / sanguine chalk / verdigris / aquatint night. */ --code-fg: var(--ink-90); /* 10.81 / 9.87 / 8.53 / 9.26 / 10.02:1 */ --code-comment: var(--ink-70); /* the floor's first clearing step: 5.75 / 5.37 / 4.86 / 5.10 / 6.50:1 (ink-40 sat at 2.47 / 2.41 / 2.30 / 2.34 / 2.94) */ --code-keyword: var(--ink); /* 14.26 / 13.13 / 11.17 / 12.36 / 12.15:1 */ --code-machine: var(--sanguine-ink); /* the ONE accent inside code — 80% sanguine, still reading sanguine, but 4.73 / 6.96 / 9.68 / 5.41 / 6.31:1 where bare --sanguine fell to 3.61 (bistre) and 4.35 (verdigris) */ --code-string: var(--ink-80); /* muted ink, no new hue — a step above comment so the two stay apart: 7.89 / 7.27 / 6.43 / 6.85 / 8.14:1 (ink-60 sat at 4.25 / 4.04 / 3.73 / 3.86 / 5.09) */ --code-name: var(--ink); /* defs, types, functions — structural ink */ /* selection */ --select-bg: var(--ink); --select-fg: var(--paper); } /* ============================================================ SCHEMES — alternate pigment sets, selectable in Admin (Settings → Design → "Color scheme"; default.hbs stamps scheme- onto ). Each scheme re-inks the SAME system: only the base pigments change — the tonal ramp, semantic aliases and casts above all derive via color-mix, and the WebGL plates follow because engraving.js re-reads --ink/--paper off :root at runtime. (--foxing is not restated: nothing consumes the token, and the shader bakes its own fox-stain brown — foxing keeps the house cast in every scheme.) Intentional divergence from the design source (like fonts.css): the source ships bistre only; bistre stays the default and needs no block here. The .tr-mezzo grain (treatments.css) bakes its ink into an SVG data URI, so each scheme restates --mezzo-grain with its own feColorMatrix offsets — the three values are ink R/G/B ÷ 255. The selector rides on .tr-mezzo because that class sets the property directly; a :root-level value would lose. ============================================================ */ /* iron gall — blue-black gall ink on a cool laid rag; madder accent */ :root.scheme-iron_gall{ --ink: #232a38; --paper: #edeee8; --paper-hi: #f4f5f0; --paper-lo: #e2e4da; --sanguine: #a83c2b; } :root.scheme-iron_gall .tr-mezzo{ --mezzo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.137 0 0 0 0 0.165 0 0 0 0 0.220 0 0 0 -1.1 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E"); /* @kind other */ } /* sanguine chalk — the whole impression pulled in red-brown chalk; the second crayon is black chalk (aux deux crayons): a cool slate accent, so hovers, marks and machine tokens keep a readable second voice against the warm ink — hue apart even under CVD */ :root.scheme-sanguine_chalk{ --ink: #542814; --paper: #f6ecdc; --paper-hi: #faf2e4; --paper-lo: #eee0ca; --sanguine: #39424e; } :root.scheme-sanguine_chalk .tr-mezzo{ --mezzo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.329 0 0 0 0 0.157 0 0 0 0 0.078 0 0 0 -1.1 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E"); /* @kind other */ } /* verdigris — green-black etching ink on pale celadon; copper accent */ :root.scheme-verdigris{ --ink: #26312a; --paper: #eef0e3; --paper-hi: #f4f6ea; --paper-lo: #e2e6d4; --sanguine: #b05c2c; } :root.scheme-verdigris .tr-mezzo{ --mezzo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.149 0 0 0 0 0.192 0 0 0 0 0.165 0 0 0 -1.1 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E"); /* @kind other */ } /* aquatint night — the plate inverted: pale rag "ink" on a deep plate-brown ground; sanguine brightened to carry on the dark */ :root.scheme-aquatint_night{ --ink: #ede3c8; --paper: #211b11; --paper-hi: #2a2317; --paper-lo: #181309; --sanguine: #d8823f; } :root.scheme-aquatint_night .tr-mezzo{ --mezzo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.929 0 0 0 0 0.890 0 0 0 0 0.784 0 0 0 -1.1 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E"); /* @kind other */ } /* pale hatching over a dark ground: treatments.css multiplies the engrave lines into the sheet, which would sink them into the plate — draw them plainly; light-on-dark already carries the contrast */ :root.scheme-aquatint_night .tr-engrave{ background-blend-mode: normal; }