/* "Cylinder rose" theme: R-410A-cylinder rose, frost cyan, rose-tinted
neutrals — the rose of the refrigerant cylinder against the frost it
makes. All the exam flavor lives in the token blocks below, including the
--track-texture pressure-gauge tick scale and the --track-marker recovery
cylinder on the progress bar; retheme a fork by editing the tokens,
nothing structural.
Light/dark follows prefers-color-scheme unless the Settings theme override
sets data-theme="light"/"dark" on . The dark token block therefore
appears twice: once for system-dark (unless overridden to light), once for
the explicit dark override. Keep the two copies identical. */
:root {
--bg: #f5eff2;
--card: #ffffff;
--text: #2b1a22;
--muted: #78606c;
--accent: #a52e5e;
--accent-hi: #8a2450;
--accent-text: #ffffff;
--nav-bg: #a52e5e;
--nav-text: #fae8f0;
--accent2: #2b9cc0;
--accent2-text: #05242e;
--border: #e3d3db;
--ok: #178a5c;
--ok-bg: #e3f1ea;
--bad: #b23a2a;
--bad-bg: #f7e9e4;
--warn: #b45309;
--surface-dark: #38222d;
--shadow: 0 1px 2px rgba(42, 16, 28, 0.07), 0 4px 16px rgba(42, 16, 28, 0.05);
/* Pressure-gauge scale ticked across the progress track: two minor ticks,
then a wider major one, like the face of a manifold gauge. References
--accent2, so it follows the dark palette on its own; set to `none` for
a plain track. Defined once here since both dark blocks would keep it. */
--track-texture: repeating-linear-gradient(90deg,
transparent 0 7px, var(--accent2) 7px 9px, transparent 9px 16px,
var(--accent2) 16px 18px, transparent 18px 25px,
var(--accent2) 25px 28.5px);
/* Refrigerant recovery cylinder rolling along the gauge scale at the
leading edge of the progress fill. Inline SVG rather than an emoji:
emoji glyphs come from whatever emoji font the visitor has (or hasn't)
installed, and on Linux the marker rendered tiny or not at all. Pale
rose-white, deliberately NOT the frost cyan of the tick texture, so the
cylinder reads against the ticks instead of blending into them; the
color is baked into the data URI, so the dark blocks carry their own
copy. The clearance keeps the 18px marker and its 3px gap inside the
layout at 100%. */
--track-marker: url('data:image/svg+xml,');
--track-marker-clearance: 21px;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #171016;
--card: #221822;
--text: #f0e4ea;
--muted: #b295a3;
--accent: #e06a97;
--accent-hi: #ea82a8;
--accent-text: #33091b;
--nav-bg: #571b34;
--nav-text: #f6dfe9;
--accent2: #5bbede;
--accent2-text: #06222d;
--border: #3c2a35;
--ok: #45c08c;
--ok-bg: #142e23;
--bad: #f0836c;
--bad-bg: #38211b;
--warn: #e5a44e;
--surface-dark: #120b10;
--shadow: none;
--track-marker: url('data:image/svg+xml,');
}
}
:root[data-theme="dark"] {
--bg: #171016;
--card: #221822;
--text: #f0e4ea;
--muted: #b295a3;
--accent: #e06a97;
--accent-hi: #ea82a8;
--accent-text: #33091b;
--nav-bg: #571b34;
--nav-text: #f6dfe9;
--accent2: #5bbede;
--accent2-text: #06222d;
--border: #3c2a35;
--ok: #45c08c;
--ok-bg: #142e23;
--bad: #f0836c;
--bad-bg: #38211b;
--warn: #e5a44e;
--surface-dark: #120b10;
--shadow: none;
--track-marker: url('data:image/svg+xml,');
}