/* ===================================================================== Pro visual style — paper-toned academic reference presentation. This is the Effect Index presentation, lifted off the publication that used to own it. Effect Index renders it by policy; dose.wiki renders it when a reader picks Pro. Nothing here may express publication identity: routes, copy, navigation, wordmark strings, metadata and licensing stay behind data-site, and this sheet never reads that attribute. Deliberately UNLAYERED, and no longer bundled at all: this sheet ships as a static copy in public/ (npm run generate:appearance-sheets), attached as a AFTER the bundled chain — after theme-light-mode.css's link and before the generated chroma sheet's (src/theme/appearanceSheets.ts pins that order) — for exactly the readers whose visual style is Pro. Two consequences the whole sheet depends on: 1. Unlayered rules beat every layered rule regardless of specificity, so these rules win over Tailwind call-site utilities (backdrop-blur-*, shadow-[...]) and over everything in utilities-theme.css / components.css with no !important at all. 2. theme-light-mode.css carries ~367 !important declarations that resolve to var(--theme-*). Those cannot be out-specified — so this sheet works through the TOKENS they read, not through their selectors. The rule blocks further down exist only for the handful of decorations that hardcode colour instead of reading a token. Every selector is scoped to html[data-visual-style="pro"], so the sheet is inert on Fun: the attribute value is never "pro" there. Both colour schemes run through ONE set of rules. The scheme axis lives entirely in the --ei-* seed variables at the top: every --theme-* binding below resolves a seed rather than a literal, and custom properties are substituted per element after the cascade, so the dark seed block re-tints the whole sheet without restating a single derived token. A literal colour anywhere below the palette is therefore a bug, with exactly two exceptions, both scheme-independent by nature: the header and footer rails, which are charcoal in BOTH schemes, and the lightbox theatre, which is a darkened room. proTheme.test.ts holds that line. The one legitimate !important is the backdrop-filter kill. It is kept defensively: any lazily-injected third-party sheet lands in after this one and would otherwise win on source order at equal specificity. ===================================================================== */ /* --------------------------------------------------------------------- Palette: light seeds, and every derived token for both schemes. The three-selector list is specificity, not repetition. It matches at (0,2,1) whenever data-theme is present — light OR dark — and still at (0,1,1) if the attribute is missing, so the palette never depends on script timing and never leaves Pro unstyled. (0,2,1) is what puts this palette above the authored Fun token blocks in site-colors.css and level with the Fun half of the generated surface sheet, surface-tokens.generated.css (the base block of the retired surface axis). That sheet is bundled while this one attaches after the bundle, so at that tie THIS sheet would now win on source order — but the tie never happens, because the Fun block it emits carries :where(:not([data-visual-style="pro"])) and so matches no Pro root at all. That guard adds nothing to specificity, which is the point: it separates the rungs without moving them, from wherever each sheet loads. accent-tokens.generated.css is the half that is meant to reach this palette: it re-seats the --ei-* seeds below at (0,3,1), one attribute above this block. That is how the surface and accent axes re-tint roughly two hundred derived tokens from outside this file, on specificity rather than on where the bundler happens to put them. It does NOT out-rank the Theme Lab. The Lab's runtime overrides name data-theme four times to reach (0,4,1) (see userLayerSelector in themeLabStorage.ts) and land in after this sheet, so they win over everything here. That is the intended direction: an editor authoring in the Lab has to be able to see a Pro edit take effect, and a palette that repainted Pro from underneath the Lab would make every such edit look like it did nothing. proTheme.test.ts pins the whole ladder. The dark seed block below repeats the (0,2,1) dark selector and wins on source order, which is why only the seeds have to be restated there. --------------------------------------------------------------------- */ html[data-visual-style="pro"], html[data-visual-style="pro"][data-theme="light"], html[data-visual-style="pro"][data-theme="dark"] { /* Paper canvas. Every gradient stop collapses to the single page value; every halo, glow and vignette goes fully transparent. */ /* Cooled toward the original site's near-white sheet (#fff content on #fbfbfb cards). A trace of warmth is kept so the page does not read as clinical white next to the charcoal chrome, but the parchment cast is gone — it clashed with the neutral dark bar. */ --ei-paper: #f6f5f1; --ei-surface: #fbfaf8; --ei-surface-raised: #ffffff; --ei-surface-sunk: #efeee9; --ei-surface-deep: #e4e2db; --ei-chrome: #efeee9; --ei-border: #dcdad3; /* The strong border is the one that outlines fields, selects and other real controls, so SC 1.4.11 puts a 3:1 floor on it against the surface it is drawn on. The retired #c6c3ba measured 1.76:1 on the raised surface #ffffff that every Pro light field fills with, and 1.62:1 on paper — it was a hairline wearing the "strong" name. #8b8880 keeps the same warm R>G>B cast and reads 3.54:1 on #ffffff, 3.39:1 on --ei-surface #fbfaf8, 3.25:1 on paper #f6f5f1 and 3.05:1 on the sunk step #efeee9, so it clears the floor on every light ground rather than only the measured one. Repainting the token rather than splitting a field-only value out of it: the dark block already defines this token BY that role (see :540) and tunes it to 4.08:1 there, so light was the scheme that disagreed with the shared definition. The three decorative consumers — --theme-border-strong, --theme-card-border-strong and --theme-profile-markdown-quote-border — darken with it, which is the point: the quiet hairline is --ei-border #dcdad3, and "strong" now differs from it by more than a rounding step. */ --ei-border-strong: #8b8880; /* Neutral warm-grey ink. The original's #333 body anchor is kept; its #4a4a4a headings and #999 subtitles are not, because #999 could not carry text at any Pro light ground and pulling only the tail down would have bunched the last three steps. Every step from --ei-ink to --ei-ink-4 is text (--theme-text-primary through --theme-text-faint), so all four owe 4.5:1 against the WORST light ground, the sunk surface #efeee9; --ei-ink-5 is --theme-text-ghost, which owes 3:1. The retired #8a8a8a faint step measured 2.97:1 there and the retired #9d9d9d ghost step 2.33:1. Clearing 4.5:1 on #efeee9 caps a text step at #6c6c6c, which is where the old ink-3 already sat, so the ramp is redistributed as a set instead of having its top two steps darkened into the step below them. The five steps are now evenly spaced at a constant 7.7 L* pitch (21.2 / 28.9 / 36.6 / 44.4 / 52.0), so the separation the old ramp had is preserved while the whole ramp fits under the floor. Measured on the sunk step #efeee9 / on paper #f6f5f1: 10.88:1 / 11.58:1 primary, 8.38:1 / 8.93:1 headings, 6.32:1 / 6.73:1 muted, 4.73:1 / 5.03:1 faint, and 3.59:1 / 3.83:1 ghost. #4a4a4a moved 2.6 L* to #444444 to hold that pitch; the other three light grounds (#fbfaf8, #ffffff, #f6f5f1) are all lighter than #efeee9, so every one of them measures higher than the figures above. */ --ei-ink: #333333; --ei-ink-2: #444444; --ei-ink-3: #565656; --ei-ink-4: #696969; --ei-ink-5: #7c7c7c; --ei-accent: #3d9991; --ei-accent-strong: #27635d; --ei-accent-soft: #5cb3aa; --ei-accent-muted: #34837c; /* Border-weight accent. The four seeds above are TEXT-contrast values (links, labels), and reusing them as 1px hover/selected outlines is what made every interactive edge read as a hard bright line. These two are the accent mixed back toward the hairline: `edge` is the hover cue, and `edge-strong` is the selected/inline-reference outline that still has to be identifiable at rest. Derived with color-mix rather than authored so the generated plum seeds (accent-tokens.generated.css) re-tint them for free in both schemes — custom properties substitute per element after the cascade, so each scheme's own --ei-accent/--ei-border pair feeds the mix. Focus rings deliberately do NOT use these: focus keeps the full accent. */ --ei-accent-edge: color-mix(in srgb, var(--ei-accent) 30%, var(--ei-border)); --ei-accent-edge-strong: color-mix(in srgb, var(--ei-accent) 55%, var(--ei-border)); --ei-shadow-soft: rgb(51 51 51 / 0.08); --ei-shadow-strong: rgb(51 51 51 / 0.12); /* Dark chrome. The original site bracketed a light sheet between a #2e2e2e bar and a #1f1f1f footer; these are the only two dark surfaces on the site and they are applied under scoped selectors further down, never as page-level tokens. They stay charcoal in BOTH schemes — the bracketing is the page shell, not a light-mode trick — so the dark block only nudges them far enough apart from a dark canvas to stay legible as rails. `sunk` completes the family for controls that have to read as recessed while sitting on a rail: the appearance toggles' track is the only one today, and without it the track inherits the paper-scheme page value. */ --ei-chrome-dark: #2e2e2e; --ei-chrome-darker: #1f1f1f; --ei-chrome-sunk: #232323; --ei-chrome-raised: #3a3a3a; --ei-chrome-border: #444444; --ei-on-dark: #f2f2f0; --ei-on-dark-muted: #cccccc; /* The faint step is the header's smallest ink — nav icons, and via --theme-text-faint anything the bar renders below label weight. Both rails read this ONE value: their selectors carry no data-theme, so it is measured against the LIGHTER of the two, the light scheme's #2e2e2e bar, where it reads 4.83:1; on the dark scheme's #1f1f1f bar it reads 5.86:1. The retired #8a8a8a was tuned against #1f1f1f alone (4.77:1) and fell to 3.93:1 on the light bar, under the 4.5:1 body-text floor. */ --ei-on-dark-faint: #9a9a9a; /* The accent has to lighten to stay legible on charcoal; this is the accent hue at a luminance that reads on a dark bar. Declared ONCE, here in the light/root block, because the chrome rails read it in BOTH schemes — their selectors carry no data-theme — so the dark block never restates it. Teal is this family's DEFAULT VALUE, not its nature. `--ei-accent*` is the accent axis's Pro half: accent-tokens.generated.css re-seats all five steps under html:not([data-accent]) on dose.wiki, so every token below that resolves one of them wears that publication's plum with no restatement. */ --ei-accent-on-dark: #6fc4bb; /* Tinted washes and marks — the values that cannot be derived from the ramps above: a selection wash, a search-hit fill, the scrim that fades a collapsed dose table into the canvas, the ink that sits ON a filled accent, and the flat mark colour. Each is a seed rather than a literal at its use site so the dark block can flip it without restating the token that reads it. */ --ei-selection: #cde5e1; --ei-ring-soft: #9ecdc7; --ei-highlight: #d7e7e4; --ei-fade: rgb(246 245 241 / 0.88); --ei-on-accent: #ffffff; --ei-logo-ink: #000000; /* Intensity ramp for the Levelling System rows: five steps of neutral grey running away from the canvas — light→dark here, dark→light in the dark block, which runs the same five steps in the opposite direction. Still greyscale: the Levelling System is not the safety ramp and must not borrow its colours. The two families answer to DIFFERENT floors, which nothing here recorded before and which is how the quiet end of both drifted under its own. --ei-level-N is the level label, set 12px/600 at :1684-1727 — normal text, so 4.5:1. --ei-level-N-mark is painted as background-color on that row's dot/bar in the same block — a graphical object, so 3:1. Label and marker also stay tuned apart because a solid fill reads with more presence than type set at the same value. Both are measured against the WORST light ground, the sunk surface #efeee9; paper #f6f5f1 and surface #fbfaf8 are lighter, so every step reads higher on them. Retired against that ground: label #9a9a9a at 2.42:1 (2.70:1 even on surface) and label #7c7c7c at 3.59:1 (3.83:1 on paper), both under 4.5:1, and mark #a8a8a8 at 2.05:1, under the mark family's 3:1. Clearing 4.5:1 on #efeee9 caps a text step at #6c6c6c, so — as with --ei-ink at :107 — the whole five-step ramp is redistributed at an even pitch instead of the failing tail being darkened into the step beside it. Labels now sit at a constant 8.3 L* pitch (44.8 / 36.6 / 28.4 / 19.9 / 11.8) measuring 4.66 / 6.32 / 8.52 / 11.36 / 14.19:1 on #efeee9. The mark family is that ramp lifted a uniform 6 L*, measuring 3.75 / 5.09 / 6.83 / 9.21 / 12.19:1 there. The #1f1f1f lead label is unchanged. */ --ei-level-1: #6a6a6a; --ei-level-2: #565656; --ei-level-3: #434343; --ei-level-4: #303030; --ei-level-5: #1f1f1f; --ei-level-1-mark: #797979; --ei-level-2-mark: #646464; --ei-level-3-mark: #515151; --ei-level-4-mark: #3e3e3e; --ei-level-5-mark: #2b2b2b; /* Page canvas */ --theme-body-bg: var(--ei-paper); --theme-page-start: var(--ei-paper); --theme-page-mid: var(--ei-paper); --theme-page-end: var(--ei-paper); --theme-page-halo-top: transparent; --theme-page-halo-left: transparent; --theme-page-halo-right: transparent; --theme-page-edge-vignette: transparent; --theme-home-glow-top: transparent; --theme-home-glow-bottom: transparent; /* Ink ramp */ --theme-text-primary: var(--ei-ink); --theme-text-secondary: var(--ei-ink-2); --theme-text-muted: var(--ei-ink-3); --theme-text-faint: var(--ei-ink-4); --theme-text-ghost: var(--ei-ink-5); /* Accent */ --theme-accent-strong: var(--ei-accent-strong); --theme-accent: var(--ei-accent); --theme-accent-soft: var(--ei-accent-soft); --theme-accent-muted: var(--ei-accent-muted); /* Opaque rather than alpha-blended: on paper a translucent wash reads as a smudge. Shadow tokens keep their alpha — a shadow colour has to. */ --theme-selection: var(--ei-selection); /* Static section headings are ink, not accent. On the original site the accent meant "clickable" and nothing else; spending it on structure is what made the reskin read as accent-saturated. Full ink, not the dimmer ink-2 step, so a heading never reads weaker than the body it introduces; the distinction now comes from weight, case and tracking. */ --theme-section-heading: var(--ei-ink); --theme-ring-soft: var(--ei-ring-soft); /* Logo. The mark is an alpha mask over --theme-logo-fill, so these stops are the only thing that gives the mark its colour. Pro is a flat skin with exactly one gradient: this mark. Everything else — page, cards, chrome, controls — stays flat, and the ramp is what keeps the one piece of brand on the page from reading as a stencil. The old absolute rule (flat black on paper, flat white on a dark canvas, never tinted) is relaxed only at the tail: the mark still LEADS with the scheme's ink and the accent arrives late, so it never becomes an accent-coloured icon. Stops 1-2 hold the ink end and stops 3-4 the accent end, so the turn happens past the mark's midpoint. The positions are pulled inside 0-100% on purpose: .theme-dosewiki-logo paints this at `background-size: 140%` (utilities-theme.css), so roughly the outer 15% at each end is cropped and a stop parked at 100% would never be seen. Both ends resolve seeds, so the scheme axis stays in the palette: ink flips black/white with the scheme and --ei-accent already flips to its dark-canvas luminance. The mid stop is mixed rather than seeded so it tracks whichever pair is in force. --theme-logo-fill has to stay -typed because it is consumed as a background-image over a mask — a bare hex is silently dropped by the CSS parser. */ --site-logo-stop-1: var(--ei-logo-ink); --site-logo-stop-2: var(--ei-logo-ink); --site-logo-stop-3: color-mix(in srgb, var(--ei-accent) 45%, var(--ei-logo-ink)); --site-logo-stop-4: var(--ei-accent); --theme-logo-fill: linear-gradient( 118deg, var(--site-logo-stop-1) 0%, var(--site-logo-stop-2) 26%, var(--site-logo-stop-3) 62%, var(--site-logo-stop-4) 90% ); --theme-logo-shadow: transparent; --theme-logo-shadow-hover: transparent; /* Borders, rings, shadows */ --theme-border-subtle: var(--ei-border); --theme-border-strong: var(--ei-border-strong); --theme-card-border: var(--ei-border); --theme-card-border-strong: var(--ei-border-strong); --theme-divider: var(--ei-border); --theme-shadow-soft: var(--ei-shadow-soft); --theme-shadow-strong: var(--ei-shadow-strong); /* Elevation values. The neutral scale and the shadow-colour-derived tokens inherit --theme-shadow-* above, so only the three brand-coloured lifts need restating: two magenta/violet glows this skin has always killed (the gradient button and the public-content icon tile) and the search mark's pink hairline, which keeps its geometry and takes the accent. Killing a shadow by token rather than by `box-shadow: none` leaves the element's ring intact, which is why these were --tw-shadow-color patches before. */ --theme-elevation-control-primary: 0 0 #0000; --theme-elevation-icon-tile: 0 0 #0000; --theme-elevation-mark-hairline: inset 0 0 0 1px color-mix(in srgb, var(--ei-accent) 34%, transparent); /* Opaque surfaces — never translucent, never a colour-mix over the page */ --theme-surface-soft: var(--ei-surface); --theme-surface-muted: var(--ei-surface-sunk); --theme-surface-strong: var(--ei-surface-raised); --theme-surface-deep: var(--ei-surface-deep); --theme-menu-surface: var(--ei-surface-raised); --theme-table-row-alt: var(--ei-surface-sunk); --theme-backdrop-safe: var(--ei-paper); --theme-autofill-bg: var(--ei-surface-raised); --theme-autofill-text: var(--ei-ink); /* Fields */ --theme-field-surface: var(--ei-surface-raised); --theme-field-surface-alt: var(--ei-surface); --theme-field-border: var(--ei-border-strong); --theme-field-on-chrome-surface: var(--ei-surface-raised); --theme-field-on-chrome-border: var(--ei-border-strong); --theme-field-on-panel-surface: var(--ei-surface-raised); --theme-field-on-panel-surface-alt: var(--ei-surface); /* Chrome: flat warm bar with a hairline rule instead of a drop shadow. */ --theme-chrome-surface: var(--ei-chrome); --theme-chrome-surface-strong: var(--ei-surface-sunk); --theme-chrome-border: var(--ei-border); --theme-chrome-rail-base: var(--ei-chrome); --theme-chrome-rail-highlight: var(--ei-chrome); --theme-chrome-rail-primary: var(--ei-chrome); --theme-chrome-rail-secondary: var(--ei-chrome); /* Consumed only through the `background:` shorthand (5 call sites), so a bare colour is legal here — verified, this token is NOT -typed. */ --theme-chrome-rail-bg: var(--ei-chrome); --theme-header-shadow: 0 1px 0 var(--ei-border); /* Recessed track: the thumb takes the raised step, so the two stop being the same near-white. */ --theme-toggle-pill-bg: var(--ei-surface-sunk); /* Panels: flat, opaque, hairline-bordered. */ --theme-panel-base: var(--ei-surface); --theme-frosted-panel-border: var(--ei-border); --theme-frosted-panel-highlight: var(--ei-surface); --theme-frosted-panel-primary: var(--ei-surface); --theme-frosted-panel-secondary: var(--ei-surface); --theme-frosted-panel-bg: var(--ei-surface); /* `0 0 #0000`, not `none`: utilities-theme.css:1898 substitutes this token as the FIRST entry of a three-shadow comma list on .theme-subjective-stub-panel, and `none` is only legal as a sole value — it would make the whole declaration invalid at computed-value time and delete that panel's caution hairline too. A fully transparent shadow is visually identical and composes. */ --theme-frosted-panel-shadow: 0 0 #0000; --theme-frosted-panel-hover-border: var(--ei-accent-edge); --theme-frosted-panel-hover-bg: var(--ei-surface-raised); --theme-frosted-panel-hover-shadow: 0 0 #0000; /* Controls */ --theme-control-base: var(--ei-surface-sunk); --theme-frosted-control-border: var(--ei-border); --theme-frosted-control-highlight: var(--ei-surface-sunk); --theme-frosted-control-primary: var(--ei-surface-sunk); --theme-frosted-control-secondary: var(--ei-surface-sunk); --theme-frosted-control-bg: var(--ei-surface-sunk); --theme-frosted-control-shadow: 0 0 0 1px var(--ei-border); --theme-frosted-control-hover-border: var(--ei-accent-edge); --theme-frosted-control-hover-bg: var(--ei-surface-raised); --theme-frosted-control-hover-shadow: 0 0 0 1px var(--ei-accent-edge); --theme-frosted-control-on-panel-border: var(--ei-border); --theme-frosted-control-on-panel-bg: var(--ei-surface-raised); --theme-frosted-control-on-panel-shadow: 0 0 0 1px var(--ei-border); --theme-frosted-control-on-panel-hover-border: var(--ei-accent-edge); --theme-frosted-control-on-panel-hover-bg: var(--ei-surface-raised); --theme-frosted-control-on-panel-hover-shadow: 0 0 0 1px var(--ei-accent-edge); /* Article panel families */ --theme-article-neutral-panel-border: var(--ei-border); --theme-article-neutral-panel-base: var(--ei-surface); --theme-article-neutral-panel-highlight: var(--ei-surface); --theme-article-neutral-panel-primary: var(--ei-surface); --theme-article-neutral-panel-secondary: var(--ei-surface); --theme-article-neutral-panel-bg: var(--ei-surface); --theme-article-neutral-panel-shadow: none; /* Pro uses the same Accent-owned selected-control and inline-reference contracts as Fun, but flattens them onto restrained paper surfaces. */ --theme-selected-control-base: var(--ei-surface-sunk); --theme-selected-control-border: var(--ei-accent-edge-strong); --theme-selected-control-highlight: var(--ei-surface-sunk); --theme-selected-control-primary: var(--ei-surface-sunk); --theme-selected-control-secondary: var(--ei-surface-sunk); --theme-selected-control-bg: var(--ei-surface-sunk); --theme-selected-control-text: var(--ei-accent-strong); --theme-selected-control-shadow: none; --theme-selected-control-focus: var(--ei-accent); --theme-selected-control-glow: none; --theme-inline-reference-border: var(--ei-accent-edge-strong); --theme-inline-reference-bg: var(--ei-surface-raised); --theme-inline-reference-text: var(--ei-accent-strong); --theme-inline-reference-hover-border: var(--ei-accent); --theme-inline-reference-hover-bg: var(--ei-surface-raised); --theme-inline-reference-hover-text: var(--ei-accent-strong); --theme-inline-reference-focus: var(--ei-accent); /* Scrollbars pick up the accent. */ --theme-scroll-track: var(--ei-surface-sunk); --theme-scroll-track-bg: var(--ei-surface-sunk); --theme-scroll-track-border: var(--ei-border); --theme-scroll-thumb: var(--ei-accent); --theme-scroll-thumb-hover: var(--ei-accent-strong); --theme-scroll-thumb-bg: var(--ei-accent); --theme-scroll-thumb-hover-bg: var(--ei-accent-strong); --theme-scroll-thumb-glow: transparent; /* Misc UI accents */ --theme-name-chip-bg: var(--ei-surface-sunk); --theme-name-chip-bg-hover: var(--ei-surface-raised); --theme-name-chip-text: var(--ei-ink-2); --theme-name-chip-text-hover: var(--ei-accent-strong); --theme-name-chip-ring: var(--ei-border); --theme-name-chip-ring-hover: var(--ei-accent-edge); --theme-skip-link-bg: var(--ei-accent-strong); --theme-skip-link-text: var(--ei-on-accent); --theme-flag-ring: var(--ei-border); --theme-flag-shadow: none; --theme-profile-markdown-quote-bg: var(--ei-surface-sunk); --theme-profile-markdown-quote-border: var(--ei-border-strong); /* Neutral, not the accent: the entry label beside it is the link, and doubling the affordance on the bullet is what made the index read as accent-washed. */ --theme-index-card-bullet: var(--ei-ink-4); --theme-avatar-gradient-from: var(--ei-accent-soft); --theme-avatar-gradient-to: var(--ei-accent-strong); --theme-home-nav-card-border: var(--ei-border); --theme-dose-tier-fade: var(--ei-fade); --theme-plateau-tier-fade: var(--theme-dose-tier-fade); /* Search. The stock light theme sets --theme-search-highlight-text to a near-white (#fae8ff) that is unreadable on a pale fill; ink it. */ --theme-search-highlight-bg: var(--ei-highlight); --theme-search-highlight-text: var(--ei-ink); --theme-search-overlay-bg: var(--ei-paper); /* Trip report identity colours (plum/violet in stock light mode). These are brand decoration, not the safety ramp, so they retint. The onset green is left alone — it belongs to the phase ramp's own logic. */ --theme-report-substance-text: var(--ei-accent-strong); --theme-report-metadata-text: var(--ei-ink-3); --theme-report-phase-peak-text: var(--ei-accent-strong); --theme-report-phase-offset-text: var(--ei-ink-2); --theme-report-phase-peak-bg: var(--ei-surface-sunk); --theme-report-phase-offset-bg: var(--ei-surface-sunk); --theme-report-phase-onset-bg: var(--ei-surface-sunk); --theme-report-phase-peak-border: var(--ei-border); --theme-report-phase-offset-border: var(--ei-border); --theme-report-phase-peak-dot: var(--ei-accent); --theme-report-phase-offset-dot: var(--ei-ink-3); /* Status badges and interaction cards. The semantic ramp's TEXT, BORDER and RING colours stay untouched — they are the safety signal and must remain readable and distinguishable from the link accent. Only the glassy gradient FILLS are flattened to solid tints of the same hue over the neutral surface, so danger / unsafe / caution / info / success still read at a glance without the Fun sheen. Cards sit on the surface; chips sit one step recessed to match the neutral badge. */ --theme-status-badge-inset: transparent; --theme-semantic-neutral-badge-bg: var(--ei-surface-sunk); --theme-semantic-neutral-badge-text: var(--ei-ink-2); --theme-semantic-neutral-badge-ring: var(--ei-border); --theme-semantic-neutral-badge-glow: transparent; --theme-semantic-danger-card-bg: color-mix(in srgb, rgb(var(--c-rose)) 10%, var(--ei-surface)); --theme-semantic-unsafe-card-bg: color-mix(in srgb, rgb(var(--c-orange)) 10%, var(--ei-surface)); --theme-semantic-caution-card-bg: color-mix(in srgb, rgb(var(--c-amber)) 10%, var(--ei-surface)); --theme-semantic-danger-badge-bg: color-mix(in srgb, rgb(var(--c-rose)) 18%, var(--ei-surface-sunk)); --theme-semantic-unsafe-badge-bg: color-mix(in srgb, rgb(var(--c-orange)) 18%, var(--ei-surface-sunk)); --theme-semantic-caution-badge-bg: color-mix(in srgb, rgb(var(--c-amber)) 18%, var(--ei-surface-sunk)); --theme-semantic-info-badge-bg: color-mix(in srgb, rgb(var(--c-blue)) 18%, var(--ei-surface-sunk)); --theme-semantic-success-badge-bg: color-mix(in srgb, rgb(var(--c-emerald)) 18%, var(--ei-surface-sunk)); --theme-semantic-danger-card-shadow: none; --theme-semantic-unsafe-card-shadow: none; --theme-semantic-caution-card-shadow: none; /* Type. Pro's face is Titillium Web wherever the build keeps it. dose.wiki registers it lazily as --font-pro (next/font/local, preload:false, so a Fun reader downloads nothing until Pro paints), and the Effect Index build renders it as its own preloaded --font-display face and defines no --font-pro at all — the fallback in this var() is what makes Pro resolve the face that build has already fetched instead of registering the same four woff2 files a second time. Both families have to be named. base.css binds --font-family-display to var(--font-display), which is Blinker on dose.wiki, so Pro states its own display face rather than inheriting the build's. Each next/font variable already expands to the face plus its metric-matched fallback, so the swap changes letterforms and not line boxes. */ --font-family-body: var(--font-pro, var(--font-display)), "Titillium Web", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-display: var(--font-pro, var(--font-display)), "Titillium Web", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Tracking. base.css:49-51 sets the display/heading/body tracking NEGATIVE (-0.04em / -0.025em / -0.01em). Tight tracking is a modern-product signal and it is the single strongest reason the reskin still read as a different typeface even though every element resolves Titillium: the eye reads letterfit before it reads letterforms. Zero, not a positive value — this ramp feeds body copy (base.css:144 puts --type-tracking-body on ) and prose does not want to be tracked out. The tracked-out voice belongs to headings and labels, which are set explicitly further down and by --type-tracking-label, left at its already-positive 0.16em. */ --type-tracking-display: 0; --type-tracking-heading: 0; --type-tracking-body: 0; } /* --------------------------------------------------------------------- Pro dark — the same system after dark. Seeds only. Every --theme-* binding in the block above reads one of these through var(), and custom properties are substituted per element AFTER the cascade has picked a winner for each property independently, so redefining the seed here re-tints roughly two hundred derived tokens without repeating one of them. Nothing in either block is exempt: every colour token holds a colour value, never an `H S% L%` component list, because a component list cannot read a colour-valued seed and so cannot follow the palette. What does NOT change: type, case, tracking, radii, flatness, and the rule that the accent means "interactive" and nothing else. This is a palette swap inside one visual system, not a second visual system. The chrome rails do not flip. Header and footer are charcoal in both schemes — that bracketing IS the Pro page shell, not a light-mode trick — so the chrome seeds below only step apart far enough to stay legible as rails against a dark canvas instead of merging into it. --------------------------------------------------------------------- */ html[data-visual-style="pro"][data-theme="dark"] { /* Canvas and surfaces. Neutral near-black, never pure black and never plum: the paper scheme's warmth comes from print stock, which has no counterpart on a lit screen. Surfaces step UP from the canvas, so the sunk step is the one that has to move down instead. */ --ei-paper: #131313; --ei-surface: #191919; --ei-surface-raised: #212121; --ei-surface-sunk: #0c0c0c; --ei-surface-deep: #070707; --ei-chrome: #191919; /* Hairlines stay quiet; the strong border is the one that outlines fields, selects and other real controls, so it clears 3:1 against the raised surface it sits on: #808080 on #212121 measures 4.08:1. The paper scheme is held to the same role rather than to a decorative hairline — this comment used to describe it as "decorative 1.8:1", which was a statement of the defect, not of a design: the same token outlines the same controls in both schemes, and light now carries #8b8880 at 3.54:1 on its own raised surface #ffffff (see :89). */ --ei-border: #3f3f3f; --ei-border-strong: #808080; /* Ink ramp. Same five steps as the paper ramp, walking the other way and opening each gap a little: light type on a dark ground reads thinner than dark type on paper, so the muted step that carries body-adjacent text lands near #cccccc rather than at the paper ramp's 4.9:1 equivalent. 13.5:1 primary, 10.4:1 headings, 8.5:1 muted, 5.4:1 faint, 3.8:1 ghost. */ --ei-ink: #f2f2f0; --ei-ink-2: #d6d6d3; --ei-ink-3: #c2c2bf; --ei-ink-4: #9b9b98; --ei-ink-5: #7f7f7c; /* The accent keeps its meaning and swaps its direction: "strong" is the highest contrast against the canvas, which on paper meant darker and here means lighter. 7.4:1 for the base link, 9.2:1 for the strong one, measured against the raised charcoal surface these sit on rather than the page: the canvas is darker still, so the same pair measures 9.1:1 and 11.2:1 there. Every accent in accents.ts clears both numbers. */ --ei-accent: #6fc4bb; --ei-accent-strong: #8fd6ce; --ei-accent-soft: #4e9c95; --ei-accent-muted: #59aaa2; /* Shadows carry the separation that borders carry on paper, so they deepen rather than tint. No glow: depth here is occlusion, not light. */ --ei-shadow-soft: rgb(0 0 0 / 0.45); --ei-shadow-strong: rgb(0 0 0 / 0.6); /* Chrome. The bar lifts above the canvas and the footer sinks below it, so the page still reads as content bracketed between two rails instead of one flat sheet of charcoal. Both stay off black. */ --ei-chrome-dark: #1f1f1f; --ei-chrome-darker: #0a0a0a; --ei-chrome-sunk: #0c0c0c; --ei-chrome-raised: #2b2b2b; --ei-chrome-border: #383838; /* Washes and marks. The selection and search-hit fills become deep tints of the accent that keep the primary ink above 7:1; the tier scrim fades to the dark canvas; accent fills now want dark ink on them; the mark's lead end goes white, which is the other half of its ink→accent ramp. */ --ei-selection: #2f4f4c; --ei-ring-soft: #4a8a83; --ei-highlight: #33534f; --ei-fade: rgb(19 19 19 / 0.88); --ei-on-accent: #1b1b1b; --ei-logo-ink: #f2f2f0; /* The intensity ramp runs the other way: level 1 is the step nearest the canvas and level 5 the furthest from it, which on a dark ground means climbing toward the ink rather than away from it. Still greyscale — the Levelling System is not the safety ramp and must not borrow its colours. Same two floors as the light block at :193: --ei-level-N is 12px/600 label text (4.5:1), --ei-level-N-mark is a background-color fill on the row's dot/bar (3:1, a graphical object). Measured against the WORST dark ground, the raised surface #212121; surface #191919 and paper #131313 are darker, so every step reads higher on them. The retired #7a7a7a level-1 label measured 3.75:1 there — 4.10:1 on surface and 4.33:1 on paper, under 4.5:1 on all three. The retired marks all cleared 3:1 (#6e6e6e, the quietest, at 3.16:1) but sat only a rounding step above it. Clearing 4.5:1 on #212121 floors a text step at #888888, so the ramp is redistributed as a set at a constant 9.3 L* pitch (58.3 / 67.4 / 77.0 / 86.0 / 95.4) measuring 4.79 / 6.46 / 8.66 / 11.19 / 14.37:1 on #212121. The mark family is that ramp dropped a uniform 6 L* — toward the ground, since a solid fill reads with more presence than type — measuring 3.91 / 5.38 / 7.18 / 9.53 / 12.31:1 there. The #f2f2f0 lead label is unchanged; it is the --ei-on-dark ink anchor. */ --ei-level-1: #8c8c8c; --ei-level-2: #a4a4a4; --ei-level-3: #bebebe; --ei-level-4: #d7d7d7; --ei-level-5: #f2f2f0; --ei-level-1-mark: #7d7d7d; --ei-level-2-mark: #959595; --ei-level-3-mark: #adadad; --ei-level-4-mark: #c7c7c7; --ei-level-5-mark: #e1e1e1; } /* --------------------------------------------------------------------- Theme-agnostic tokens. --theme-horizontal-divider-image is declared ONLY in the dark :root block of site-colors.css; the light block never redefines it. Scoping it to the site attribute alone (not site + data-theme) is what makes the override actually land. It stays -typed: 10 Tailwind bg-[image:var(--theme-horizontal-divider-image)] call sites plus 8 background-image declarations consume it, and a bare colour there is silently dropped. --------------------------------------------------------------------- */ html[data-visual-style="pro"] { --theme-horizontal-divider-image: linear-gradient( 90deg, transparent 0%, var(--ei-border) 8%, var(--ei-border) 92%, transparent 100% ); } /* The second and only other -typed token. It is not declared in site-colors.css at all — it lives on .theme-article-hero-summary in theme-light-mode.css (0,2,1) and utilities-theme.css. Matching (0,2,1) unlayered and later in source order wins. Two-stop gradient, not a hex. */ html[data-visual-style="pro"] .theme-article-hero-summary { --theme-article-hero-summary-divider: linear-gradient( 90deg, var(--ei-border), var(--ei-border) ); } /* --------------------------------------------------------------------- De-glassing: backdrop filters. The ONE legitimate !important in this sheet. src/styles/lightbox.css is imported inside the lazily-loaded ReplicationLightbox chunk, so its