/* enderpearl.ai colour tokens. Every colour on the site lives in this file and nowhere else. Four colourways in two palettes, chosen on : data-theme="dark" data-theme="light" no data-theme Useful Work (default) Carbon Datasheet follows the system Deep, data-palette="deep" Fathom Bond follows the system The build writes data-palette="deep" when site.json's defaultPalette is "deep"; theme-init.js applies the visitor's choice (the header's colourway picker) or a ?theme= review link. Useful Work is the kit's (directions/useful-work). Carbon (dark) is the design's primary. Deep is the reference recolour (directions/useful-work-deep): Guilloche's vault and bond paper, with one brand colour, the pearl in sea glass, carried only by the mark (--ep-mark-pearl). Pinned surfaces, whatever the page's colourway (site.css gives them a ground and text colour): .ep-carbon, .ep-datasheet, .ep-fathom, .ep-bond one colourway, always .ep-dark, .ep-light the current palette's dark or light theme (the Keys attestation is .ep-light: Datasheet or Bond) Every palette block defines the same names; the build fails if one misses a name Carbon defines, or if the copies of one colourway (Datasheet and Bond each appear three times: the system setting, data-theme="light" and print) disagree. --ep-t-*-ink is the ink for a value printed on that thermal step (the Mining matrix, the tile); pick it for AA contrast in that palette. Print uses the palette's light theme: Datasheet, or Bond when the palette is Deep (the two blocks at the end). */ /* ==================== Useful Work ==================== */ :root, .ep-carbon, .ep-dark { color-scheme: dark; /* Surfaces · Carbon */ --ep-ground: #0F1113; /* Carbon */ --ep-panel: #171A1D; /* Graphite */ --ep-panel-raised: #1E2226; --ep-rule: #2C3238; /* Rule, structure only */ --ep-rule-strong: #454D55; --ep-tint: rgb(230 233 236 / .07); /* Text */ --ep-text: #E6E9EC; /* Aluminium, 15.5:1 on Carbon */ --ep-text-2: #A3ABB3; /* Anodised, 8.1:1 */ --ep-text-3: #7E8790; /* Machined, 4.8:1 on Graphite; labels and captions only; never on --ep-panel-raised (4.4:1) */ --ep-mark: #E6E9EC; /* Thermal ramp · data only · -3 … +3 */ --ep-t-n3: #809AEC; --ep-t-n2: #4E63B0; --ep-t-n1: #2A2E3A; --ep-t-0: #23272C; --ep-t-p1: #36322D; --ep-t-p2: #C57638; --ep-t-p3: #F1AF5D; /* Ink for a value printed on each thermal step (the most legible of the kit's inks, AA) */ --ep-t-n3-ink: var(--ep-cell-ink); --ep-t-n2-ink: var(--ep-text); --ep-t-n1-ink: var(--ep-text); --ep-t-0-ink: var(--ep-text); --ep-t-p1-ink: var(--ep-text); --ep-t-p2-ink: var(--ep-cell-ink); --ep-t-p3-ink: var(--ep-cell-ink); /* Node states · glyph first, colour second */ --ep-synced: #57B887; --ep-signing: #E6E9EC; --ep-refused: #E8604F; --ep-offline: #80878F; /* Interface (derived from the kit's inks) */ --ep-focus: #E6E9EC; /* focus ring */ --ep-link: #E6E9EC; --ep-link-line: #7E8790; /* resting underline */ --ep-link-line-hover: #E6E9EC; --ep-inverse: #E6E9EC; /* solid button and pressed toggle */ --ep-on-inverse: #0F1113; --ep-selection: #E6E9EC; --ep-on-selection: #0F1113; --ep-cell-ink: #0F1113; /* values printed on bright ramp cells, both themes */ /* Added with the Deep palette. In Useful Work each repeats an ink above, so Carbon renders as before, except the control edge (below) */ --ep-mark-pearl: var(--ep-mark); /* the pearl in the mark: the mark's own ink */ --ep-tile-pearl: var(--ep-text); /* the resolving cell of a tile, the chosen cell on Mining */ --ep-tile-pearl-idle: var(--ep-tile-pearl); /* the Status console's pearl while our guardian is not read (Fathom: Foil) */ --ep-tile-ring: transparent; /* ring around that cell (Bond only) */ --ep-tile-path: transparent; /* wash along a band tile's row and column (Bond only) */ --ep-focus-halo: transparent; /* 3 px lining inside the focus outline (Bond only) */ --ep-synced-ink: var(--ep-synced); /* the word of the synced state; the glyph is --ep-synced */ --ep-swatch-accent: var(--ep-t-p3); /* the colourway picker's swatch only: the ramp's warm end */ /* the edge of an outline control (quiet button, copy, picker, menu), a chip and the supply bar's empty cells: 3.6:1 on Carbon, 3.3:1 on Graphite, 3.0:1 raised. The kit draws them in rule-strong (2.2:1); an edge that shows a control or a quantity needs 3:1. Hover and pressed still go to --ep-text */ --ep-control-line: #646C75; --ep-live: var(--ep-text); /* the live dot: drawn in Deep only (site.css); the Deep kit maps it to the ink here */ --ep-live-halo: rgb(230 233 236 / .18); --ep-t-dim-base: transparent; /* laid under a dimmed ramp cell; transparent: the surface under it, as before */ } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; /* Surfaces · Datasheet */ --ep-ground: #EEF0F2; /* Datasheet, cool paper */ --ep-panel: #F8F9FA; /* Sheet */ --ep-panel-raised: #FFFFFF; --ep-rule: #CFD4D9; --ep-rule-strong: #A7AEB5; --ep-tint: rgb(15 17 19 / .05); --ep-text: #0F1113; /* Carbon, 16.6:1 on Datasheet */ --ep-text-2: #3D444B; /* Graphite Ink, 8.6:1 */ --ep-text-3: #5A626A; /* Machined, 5.4:1 */ --ep-mark: #0F1113; --ep-t-n3: #3B4E9A; --ep-t-n2: #6C84D5; --ep-t-n1: #DADDE7; --ep-t-0: #E2E5E8; --ep-t-p1: #E8E3DA; --ep-t-p2: #D89445; --ep-t-p3: #B05F26; --ep-t-n3-ink: var(--ep-panel-raised); --ep-t-n2-ink: var(--ep-cell-ink); --ep-t-n1-ink: var(--ep-cell-ink); --ep-t-0-ink: var(--ep-cell-ink); --ep-t-p1-ink: var(--ep-cell-ink); --ep-t-p2-ink: var(--ep-cell-ink); --ep-t-p3-ink: var(--ep-panel-raised); --ep-synced: #1E7A4C; --ep-signing: #0F1113; --ep-refused: #B8382C; --ep-offline: #626970; --ep-focus: #0F1113; --ep-link: #0F1113; --ep-link-line: #5A626A; --ep-link-line-hover: #0F1113; --ep-inverse: #0F1113; --ep-on-inverse: #EEF0F2; --ep-selection: #0F1113; --ep-on-selection: #EEF0F2; --ep-cell-ink: #0F1113; /* Added with the Deep palette: identity values, so Datasheet renders as before, except the control edge */ --ep-mark-pearl: var(--ep-mark); --ep-tile-pearl: var(--ep-text); --ep-tile-pearl-idle: var(--ep-tile-pearl); --ep-tile-ring: transparent; --ep-tile-path: transparent; --ep-focus-halo: transparent; --ep-synced-ink: var(--ep-synced); --ep-swatch-accent: var(--ep-t-p3); --ep-control-line: #80878F; /* 3.2:1 on Datasheet, 3.5:1 on Sheet, 3.6:1 on white (the kit's rule-strong is 2.0:1) */ --ep-live: var(--ep-text); --ep-live-halo: rgb(15 17 19 / .12); --ep-t-dim-base: transparent; } } :root[data-theme="light"], .ep-datasheet, .ep-light { color-scheme: light; --ep-ground: #EEF0F2; --ep-panel: #F8F9FA; --ep-panel-raised: #FFFFFF; --ep-rule: #CFD4D9; --ep-rule-strong: #A7AEB5; --ep-tint: rgb(15 17 19 / .05); --ep-text: #0F1113; --ep-text-2: #3D444B; --ep-text-3: #5A626A; --ep-mark: #0F1113; --ep-t-n3: #3B4E9A; --ep-t-n2: #6C84D5; --ep-t-n1: #DADDE7; --ep-t-0: #E2E5E8; --ep-t-p1: #E8E3DA; --ep-t-p2: #D89445; --ep-t-p3: #B05F26; --ep-t-n3-ink: var(--ep-panel-raised); --ep-t-n2-ink: var(--ep-cell-ink); --ep-t-n1-ink: var(--ep-cell-ink); --ep-t-0-ink: var(--ep-cell-ink); --ep-t-p1-ink: var(--ep-cell-ink); --ep-t-p2-ink: var(--ep-cell-ink); --ep-t-p3-ink: var(--ep-panel-raised); --ep-synced: #1E7A4C; --ep-signing: #0F1113; --ep-refused: #B8382C; --ep-offline: #626970; --ep-focus: #0F1113; --ep-link: #0F1113; --ep-link-line: #5A626A; --ep-link-line-hover: #0F1113; --ep-inverse: #0F1113; --ep-on-inverse: #EEF0F2; --ep-selection: #0F1113; --ep-on-selection: #EEF0F2; --ep-cell-ink: #0F1113; /* Added with the Deep palette: identity values, so Datasheet renders as before, except the control edge */ --ep-mark-pearl: var(--ep-mark); --ep-tile-pearl: var(--ep-text); --ep-tile-pearl-idle: var(--ep-tile-pearl); --ep-tile-ring: transparent; --ep-tile-path: transparent; --ep-focus-halo: transparent; --ep-synced-ink: var(--ep-synced); --ep-swatch-accent: var(--ep-t-p3); --ep-control-line: #80878F; /* 3.2:1 on Datasheet, 3.5:1 on Sheet, 3.6:1 on white (the kit's rule-strong is 2.0:1) */ --ep-live: var(--ep-text); --ep-live-halo: rgb(15 17 19 / .12); --ep-t-dim-base: transparent; } /* ==================== Deep (the reference recolour) ==================== */ :root[data-palette="deep"], .ep-fathom, :root[data-palette="deep"] .ep-dark { color-scheme: dark; /* Surfaces · Fathom (Guilloche's night vault: the pearl's teal with the light taken out) */ --ep-ground: #0B1411; /* Fathom */ --ep-panel: #121D19; /* Shelf */ --ep-panel-raised: #18241F; --ep-rule: #2A3833; /* Leadline, structure only */ --ep-rule-strong: #44544D; --ep-tint: rgb(216 224 218 / .07); /* Text */ --ep-text: #D8E0DA; /* Foil, 13.9:1 on Fathom */ --ep-text-2: #9CAAA3; /* Lichen, 7.7:1 */ --ep-text-3: #7F8E87; /* Silt, 5.0:1 on Shelf; labels and captions only */ --ep-mark: #D8E0DA; /* the mark's rows and columns */ /* Verdigris and brass ramp · data only · -3 … +3 · arms matched in OKLCH lightness (L 48/49, 77/79) */ --ep-t-n3: #6DC2D1; --ep-t-n2: #1B6A76; --ep-t-n1: #1F3030; --ep-t-0: #242726; --ep-t-p1: #332D23; --ep-t-p2: #82570B; --ep-t-p3: #DCB35D; /* Ink per step: cell ink 9.2:1 on -3 and 9.5:1 on +3; Foil 4.6:1 on -2, 4.7:1 on +2 (Old Brass is dark) */ --ep-t-n3-ink: var(--ep-cell-ink); --ep-t-n2-ink: var(--ep-text); --ep-t-n1-ink: var(--ep-text); --ep-t-0-ink: var(--ep-text); --ep-t-p1-ink: var(--ep-text); --ep-t-p2-ink: var(--ep-text); --ep-t-p3-ink: var(--ep-cell-ink); /* Node states · glyph first · Sage 10.2:1, Foil (no hue), Claret 6.6:1, Ash 6.0:1 */ --ep-synced: #ADC893; --ep-signing: #D8E0DA; --ep-refused: #D4828A; --ep-offline: #8A9590; /* Interface: Glint, a pale mint, marks only what is live or chosen */ --ep-focus: #A6E8D0; /* Glint focus ring, 13.4:1 */ --ep-link: #D8E0DA; --ep-link-line: #7F8E87; /* Silt: links never take the pearl */ --ep-link-line-hover: #D8E0DA; --ep-inverse: #D8E0DA; /* solid button: Foil, never mint */ --ep-on-inverse: #0B1411; --ep-selection: #A6E8D0; /* Glint */ --ep-on-selection: #0B1411; --ep-cell-ink: #0B1411; /* the dark ink for values on bright ramp cells */ --ep-mark-pearl: #459F85; /* Sea Glass, 5.8:1: the one brand colour, carried by the mark only */ --ep-tile-pearl: #A6E8D0; /* Glint: the resolving cell of a tile … */ --ep-tile-pearl-idle: var(--ep-text); /* the Status console's pearl while our guardian is not read: Foil, since Glint says live */ --ep-tile-ring: #0B1411; /* … ringed in Fathom, clear of the bright ramp ends (13.4:1; Brass alone is 1.4:1) */ --ep-tile-path: transparent; --ep-focus-halo: transparent; --ep-synced-ink: #ADC893; /* Sage */ --ep-swatch-accent: #459F85; /* the picker's swatch: the pearl */ --ep-control-line: #607069; /* control, chip and supply-bar edges: 3.6:1 on Fathom, 3.3:1 on Shelf, 3.1:1 raised */ --ep-live: #A6E8D0; /* Glint: the live dot, 13.4:1 */ --ep-live-halo: #25463C; /* Glint wash on Fathom: the live dot's halo */ --ep-t-dim-base: #151515; /* neutral: a dimmed cell keeps its hue (over green-black, brass dims to olive) */ } @media (prefers-color-scheme: light) { :root[data-palette="deep"]:not([data-theme="dark"]) { color-scheme: light; /* Surfaces · Bond (Guilloche's bond paper; green-grey, never cream) */ --ep-ground: #ECEFEA; /* Bond */ --ep-panel: #F7F8F5; /* Sheet */ --ep-panel-raised: #FCFDFB; --ep-rule: #C3CCC6; /* Leadline, structure only */ --ep-rule-strong: #A3AFA9; --ep-tint: rgb(21 36 31 / .05); /* Text */ --ep-text: #15241F; /* Intaglio, 13.9:1 on Bond */ --ep-text-2: #3F4F48; /* Plate Ink, 7.5:1 */ --ep-text-3: #5A6A63; /* Silt, 4.9:1 on Bond; labels and captions only */ --ep-mark: #15241F; /* the mark's rows and columns */ /* Verdigris and brass ramp · data only · -3 … +3 · arms matched in lightness (L 51/53, 71/73, 90/91). -1 is #CCE3E6, not the reference's #D3E4E4: as far from 0 as +1 is (ΔEok .026), on the cool arm's hue */ --ep-t-n3: #2E6F7A; --ep-t-n2: #6FACB5; --ep-t-n1: #CCE3E6; --ep-t-0: #E0E4E2; --ep-t-p1: #E9E0CE; --ep-t-p2: #CB9E4D; --ep-t-p3: #935F1A; /* Ink per step: Sheet 5.6:1 on -3 and 5.3:1 on +3; cell ink 7.4:1 on -2, 7.6:1 on +2 */ --ep-t-n3-ink: var(--ep-panel-raised); --ep-t-n2-ink: var(--ep-cell-ink); --ep-t-n1-ink: var(--ep-cell-ink); --ep-t-0-ink: var(--ep-cell-ink); --ep-t-p1-ink: var(--ep-cell-ink); --ep-t-p2-ink: var(--ep-cell-ink); --ep-t-p3-ink: var(--ep-panel-raised); /* Node states · Sage (glyph only on paper, 3.7:1; lighter than the reference #59733C so it stays apart from the pearl and the Plate Ink glyph), Intaglio half, Claret 8.5:1, Ash */ --ep-synced: #628535; --ep-signing: #15241F; --ep-refused: #7F1F26; --ep-offline: #525C58; /* Interface: mint never inks paper; it returns only as washes */ --ep-focus: #15241F; /* Intaglio outline … */ --ep-link: #15241F; --ep-link-line: #5A6A63; --ep-link-line-hover: #15241F; --ep-inverse: #15241F; --ep-on-inverse: #ECEFEA; --ep-selection: #A6D4C5; /* a firm Glint wash, 1.4:1 on Bond; Intaglio on it 9.9:1 */ --ep-on-selection: #15241F; --ep-cell-ink: #0B1411; --ep-mark-pearl: #005F46; /* Sea Glass Deep, 6.6:1 on Bond: the pearl in the mark */ --ep-tile-pearl: #005F46; /* the resolved cell takes the mark's own pearl … */ --ep-tile-pearl-idle: var(--ep-tile-pearl); --ep-tile-ring: #F7F8F5; /* … ringed in Sheet, clear of dark neighbours */ --ep-tile-path: #DDEFE7; /* Shallows: a band tile's row and column; Intaglio on it 13.5:1 */ --ep-focus-halo: #CFEBE1; /* … lined with Glint wash */ --ep-synced-ink: #15241F; /* the synced word in Intaglio; Sage marks the glyph */ --ep-swatch-accent: #005F46; /* the picker's swatch: the pearl */ --ep-control-line: #7D8B85; /* control, chip and supply-bar edges: 3.1:1 on Bond, 3.3:1 on Sheet, 3.5:1 raised */ --ep-live: #005F46; /* the live dot: Sea Glass Deep, 6.6:1 */ --ep-live-halo: #CFEBE1; /* … in a Glint-wash halo */ --ep-t-dim-base: transparent; } } :root[data-palette="deep"][data-theme="light"], .ep-bond, :root[data-palette="deep"] .ep-light { color-scheme: light; /* Surfaces · Bond (Guilloche's bond paper; green-grey, never cream) */ --ep-ground: #ECEFEA; /* Bond */ --ep-panel: #F7F8F5; /* Sheet */ --ep-panel-raised: #FCFDFB; --ep-rule: #C3CCC6; /* Leadline, structure only */ --ep-rule-strong: #A3AFA9; --ep-tint: rgb(21 36 31 / .05); /* Text */ --ep-text: #15241F; /* Intaglio, 13.9:1 on Bond */ --ep-text-2: #3F4F48; /* Plate Ink, 7.5:1 */ --ep-text-3: #5A6A63; /* Silt, 4.9:1 on Bond; labels and captions only */ --ep-mark: #15241F; /* the mark's rows and columns */ /* Verdigris and brass ramp · data only · -3 … +3 · arms matched in lightness (L 51/53, 71/73, 90/91). -1 is #CCE3E6, not the reference's #D3E4E4: as far from 0 as +1 is (ΔEok .026), on the cool arm's hue */ --ep-t-n3: #2E6F7A; --ep-t-n2: #6FACB5; --ep-t-n1: #CCE3E6; --ep-t-0: #E0E4E2; --ep-t-p1: #E9E0CE; --ep-t-p2: #CB9E4D; --ep-t-p3: #935F1A; /* Ink per step: Sheet 5.6:1 on -3 and 5.3:1 on +3; cell ink 7.4:1 on -2, 7.6:1 on +2 */ --ep-t-n3-ink: var(--ep-panel-raised); --ep-t-n2-ink: var(--ep-cell-ink); --ep-t-n1-ink: var(--ep-cell-ink); --ep-t-0-ink: var(--ep-cell-ink); --ep-t-p1-ink: var(--ep-cell-ink); --ep-t-p2-ink: var(--ep-cell-ink); --ep-t-p3-ink: var(--ep-panel-raised); /* Node states · Sage (glyph only on paper, 3.7:1; lighter than the reference #59733C so it stays apart from the pearl and the Plate Ink glyph), Intaglio half, Claret 8.5:1, Ash */ --ep-synced: #628535; --ep-signing: #15241F; --ep-refused: #7F1F26; --ep-offline: #525C58; /* Interface: mint never inks paper; it returns only as washes */ --ep-focus: #15241F; /* Intaglio outline … */ --ep-link: #15241F; --ep-link-line: #5A6A63; --ep-link-line-hover: #15241F; --ep-inverse: #15241F; --ep-on-inverse: #ECEFEA; --ep-selection: #A6D4C5; /* a firm Glint wash, 1.4:1 on Bond; Intaglio on it 9.9:1 */ --ep-on-selection: #15241F; --ep-cell-ink: #0B1411; --ep-mark-pearl: #005F46; /* Sea Glass Deep, 6.6:1 on Bond: the pearl in the mark */ --ep-tile-pearl: #005F46; /* the resolved cell takes the mark's own pearl … */ --ep-tile-pearl-idle: var(--ep-tile-pearl); --ep-tile-ring: #F7F8F5; /* … ringed in Sheet, clear of dark neighbours */ --ep-tile-path: #DDEFE7; /* Shallows: a band tile's row and column; Intaglio on it 13.5:1 */ --ep-focus-halo: #CFEBE1; /* … lined with Glint wash */ --ep-synced-ink: #15241F; /* the synced word in Intaglio; Sage marks the glyph */ --ep-swatch-accent: #005F46; /* the picker's swatch: the pearl */ --ep-control-line: #7D8B85; /* control, chip and supply-bar edges: 3.1:1 on Bond, 3.3:1 on Sheet, 3.5:1 raised */ --ep-live: #005F46; /* the live dot: Sea Glass Deep, 6.6:1 */ --ep-live-halo: #CFEBE1; /* … in a Glint-wash halo */ --ep-t-dim-base: transparent; } /* ==================== Print ==================== Paper is always the palette's light theme: Datasheet, or Bond when the palette is Deep. Browsers drop backgrounds when printing, so a dark theme's light text would land on white paper. site.js also switches data-theme for printing (so canvases redraw); these blocks cover printing without JavaScript. Elements pinned with .ep-carbon, .ep-fathom or .ep-dark keep their palette and print their ground (site.css). */ @media print { :root, :root[data-theme] { color-scheme: light; --ep-ground: #EEF0F2; --ep-panel: #F8F9FA; --ep-panel-raised: #FFFFFF; --ep-rule: #CFD4D9; --ep-rule-strong: #A7AEB5; --ep-tint: rgb(15 17 19 / .05); --ep-text: #0F1113; --ep-text-2: #3D444B; --ep-text-3: #5A626A; --ep-mark: #0F1113; --ep-t-n3: #3B4E9A; --ep-t-n2: #6C84D5; --ep-t-n1: #DADDE7; --ep-t-0: #E2E5E8; --ep-t-p1: #E8E3DA; --ep-t-p2: #D89445; --ep-t-p3: #B05F26; --ep-t-n3-ink: var(--ep-panel-raised); --ep-t-n2-ink: var(--ep-cell-ink); --ep-t-n1-ink: var(--ep-cell-ink); --ep-t-0-ink: var(--ep-cell-ink); --ep-t-p1-ink: var(--ep-cell-ink); --ep-t-p2-ink: var(--ep-cell-ink); --ep-t-p3-ink: var(--ep-panel-raised); --ep-synced: #1E7A4C; --ep-signing: #0F1113; --ep-refused: #B8382C; --ep-offline: #626970; --ep-focus: #0F1113; --ep-link: #0F1113; --ep-link-line: #5A626A; --ep-link-line-hover: #0F1113; --ep-inverse: #0F1113; --ep-on-inverse: #EEF0F2; --ep-selection: #0F1113; --ep-on-selection: #EEF0F2; --ep-cell-ink: #0F1113; /* Added with the Deep palette: identity values, so Datasheet renders as before, except the control edge */ --ep-mark-pearl: var(--ep-mark); --ep-tile-pearl: var(--ep-text); --ep-tile-pearl-idle: var(--ep-tile-pearl); --ep-tile-ring: transparent; --ep-tile-path: transparent; --ep-focus-halo: transparent; --ep-synced-ink: var(--ep-synced); --ep-swatch-accent: var(--ep-t-p3); --ep-control-line: #80878F; /* 3.2:1 on Datasheet, 3.5:1 on Sheet, 3.6:1 on white (the kit's rule-strong is 2.0:1) */ --ep-live: var(--ep-text); --ep-live-halo: rgb(15 17 19 / .12); --ep-t-dim-base: transparent; } } /* Deep prints on Bond */ @media print { :root[data-palette="deep"], :root[data-palette="deep"][data-theme] { color-scheme: light; /* Surfaces · Bond (Guilloche's bond paper; green-grey, never cream) */ --ep-ground: #ECEFEA; /* Bond */ --ep-panel: #F7F8F5; /* Sheet */ --ep-panel-raised: #FCFDFB; --ep-rule: #C3CCC6; /* Leadline, structure only */ --ep-rule-strong: #A3AFA9; --ep-tint: rgb(21 36 31 / .05); /* Text */ --ep-text: #15241F; /* Intaglio, 13.9:1 on Bond */ --ep-text-2: #3F4F48; /* Plate Ink, 7.5:1 */ --ep-text-3: #5A6A63; /* Silt, 4.9:1 on Bond; labels and captions only */ --ep-mark: #15241F; /* the mark's rows and columns */ /* Verdigris and brass ramp · data only · -3 … +3 · arms matched in lightness (L 51/53, 71/73, 90/91). -1 is #CCE3E6, not the reference's #D3E4E4: as far from 0 as +1 is (ΔEok .026), on the cool arm's hue */ --ep-t-n3: #2E6F7A; --ep-t-n2: #6FACB5; --ep-t-n1: #CCE3E6; --ep-t-0: #E0E4E2; --ep-t-p1: #E9E0CE; --ep-t-p2: #CB9E4D; --ep-t-p3: #935F1A; /* Ink per step: Sheet 5.6:1 on -3 and 5.3:1 on +3; cell ink 7.4:1 on -2, 7.6:1 on +2 */ --ep-t-n3-ink: var(--ep-panel-raised); --ep-t-n2-ink: var(--ep-cell-ink); --ep-t-n1-ink: var(--ep-cell-ink); --ep-t-0-ink: var(--ep-cell-ink); --ep-t-p1-ink: var(--ep-cell-ink); --ep-t-p2-ink: var(--ep-cell-ink); --ep-t-p3-ink: var(--ep-panel-raised); /* Node states · Sage (glyph only on paper, 3.7:1; lighter than the reference #59733C so it stays apart from the pearl and the Plate Ink glyph), Intaglio half, Claret 8.5:1, Ash */ --ep-synced: #628535; --ep-signing: #15241F; --ep-refused: #7F1F26; --ep-offline: #525C58; /* Interface: mint never inks paper; it returns only as washes */ --ep-focus: #15241F; /* Intaglio outline … */ --ep-link: #15241F; --ep-link-line: #5A6A63; --ep-link-line-hover: #15241F; --ep-inverse: #15241F; --ep-on-inverse: #ECEFEA; --ep-selection: #A6D4C5; /* a firm Glint wash, 1.4:1 on Bond; Intaglio on it 9.9:1 */ --ep-on-selection: #15241F; --ep-cell-ink: #0B1411; --ep-mark-pearl: #005F46; /* Sea Glass Deep, 6.6:1 on Bond: the pearl in the mark */ --ep-tile-pearl: #005F46; /* the resolved cell takes the mark's own pearl … */ --ep-tile-pearl-idle: var(--ep-tile-pearl); --ep-tile-ring: #F7F8F5; /* … ringed in Sheet, clear of dark neighbours */ --ep-tile-path: #DDEFE7; /* Shallows: a band tile's row and column; Intaglio on it 13.5:1 */ --ep-focus-halo: #CFEBE1; /* … lined with Glint wash */ --ep-synced-ink: #15241F; /* the synced word in Intaglio; Sage marks the glyph */ --ep-swatch-accent: #005F46; /* the picker's swatch: the pearl */ --ep-control-line: #7D8B85; /* control, chip and supply-bar edges: 3.1:1 on Bond, 3.3:1 on Sheet, 3.5:1 raised */ --ep-live: #005F46; /* the live dot: Sea Glass Deep, 6.6:1 */ --ep-live-halo: #CFEBE1; /* … in a Glint-wash halo */ --ep-t-dim-base: transparent; } }