/* theme.css — the site's dark theme, in ONE place. Loaded on every page after the page's own styles. Light mode is the page default and is untouched by this file; everything here is scoped under html[data-theme="dark"] (attribute selector beats the pages' :root blocks on specificity, so load order doesn't matter). Strategy: flip the NEUTRAL system (--bg/--paper/--ink*/--line*/--surface-3 and the stage/grid tokens). Brand accents (--acc*, sand/sage/slate, kit palettes) and self-contained colored bands (hero, kit cards, consult/CTA sand cards) keep their identity in both themes. Server renders + the scratch SVG are black line-art on a TRANSPARENT ground — dark mode shows them through invert(1) hue-rotate(180deg), which turns the ink white while keeping the dimension blues/reds on-hue. */ :root { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] { /* neutrals */ --bg: #141518; --paper: #1E2024; --surface-3: #282B30; --ink: #E7E6E2; --ink-2: #ABA9A1; --ink-3: #807E75; --line: #33363C; --line-2: #2B2E33; /* interaction helpers (light-mode fallbacks live in the pages: #000 / #fff) */ --ink-hover: #FFFFFF; /* filled-ink buttons brighten on hover instead of going black */ --on-ink: #141518; /* text sitting on an --ink-filled element */ /* page-local tokens (defined with light literals in their pages; flipped here) */ --paper-2: #24262B; /* index step-card gradient tail (#F1F3F0) */ --thumb-a: #23252A; /* gallery card stage gradient (#F1F2F4 → #DEE1E5) */ --thumb-b: #1D1F23; --line-hov: #3C4046; /* gallery card hover border (#CED1D6) */ --acc-pale: #2A2F26; /* laser accent-tinted wells (#EDF0E6) */ --warn-bg: #332B1D; /* laser warning band (#FBF1DE) */ --warn-ink: #E4D2B4; /* on the dark warning band (light: --sand-ink) */ --err: #E07A6E; /* form error red, brightened for dark ground */ --err-2: #D98A80; /* error helper text (#A8473D) */ --chip-ink: #C3CFAF; /* laser chips' green text (#4E5C38) */ --cut: #E05A4A; /* laser legend red (#C0392B) */ --engrave: #6FA0FF; /* laser legend blue (#1F5FE0) */ /* configure/review stage + graph paper */ --stage-bg: #22252A; --grid-a: #2E3138; /* major grid line (#dde0e5) */ --grid-b: #24272D; /* minor grid line (#e9ebee) */ --stage-base: #1F2126; /* graph-paper ground (#f6f7f9) */ /* the logo artwork is dark-on-transparent — re-ink it for a dark ground */ --logo-filter: invert(1) hue-rotate(180deg); /* lightbox (gallery.js reads these --smf-lb-* tokens off ) */ --smf-lb-backdrop: rgba(0, 0, 0, .62); --smf-lb-bg: #1E2024; --smf-lb-text: #E7E6E2; --smf-lb-muted: #ABA9A1; --smf-lb-img-bg: #26282D; --smf-lb-arrow-bg: #26282D; --smf-lb-arrow-ink: #E7E6E2; --smf-lb-arrow-border: rgba(255, 255, 255, .08); } /* the lightbox tokens are set on by the pages — re-set them there too */ html[data-theme="dark"] body { --smf-lb-backdrop: rgba(0, 0, 0, .62); --smf-lb-bg: #1E2024; --smf-lb-text: #E7E6E2; --smf-lb-muted: #ABA9A1; --smf-lb-img-bg: #26282D; --smf-lb-arrow-bg: #26282D; --smf-lb-arrow-ink: #E7E6E2; --smf-lb-arrow-border: rgba(255, 255, 255, .08); } /* ── the brand logo (marketing chrome; the funnel topline already routes through --logo-filter in configure-base.css) ─────────────────────── */ html[data-theme="dark"] .brand img, html[data-theme="dark"] .foot-top img.logo { filter: invert(1) hue-rotate(180deg); } /* ── rendered line-art inverts to white ink (transparent PNGs + scratch SVG); the legend swatches invert WITH it so they keep matching the drawing ── */ html[data-theme="dark"] .stage img.x-ray, html[data-theme="dark"] .fs-stage img.x-ray, html[data-theme="dark"] .vstage img.x-ray, html[data-theme="dark"] .stage svg.bxv, html[data-theme="dark"] .fs-stage svg.bxv, html[data-theme="dark"] .vstage svg.bxv, html[data-theme="dark"] .card .stage img.sil, html[data-theme="dark"] .legend i { filter: invert(1) hue-rotate(180deg); } /* Magnifier loupe: JS paints the sampled frame as an inline background-image, so the element can't take the invert filter directly (its glass tint would flip too). Instead the glass keeps the LIGHT stage color underneath, and an ::after overlay re-renders the whole composite (glass + sampled frame) through the same filter the x-ray uses — the loupe view stays identical to the inverted stage image. */ html[data-theme="dark"] .stage .loupe, html[data-theme="dark"] .fs-stage .loupe { background-color: #F2F3F5; } html[data-theme="dark"] .stage .loupe::after, html[data-theme="dark"] .fs-stage .loupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; filter: invert(1) hue-rotate(180deg); } /* ── review hero: frosted chips float over the graph paper ─────────────── */ html[data-theme="dark"] .hero .tag .chip, html[data-theme="dark"] .hero .meta, html[data-theme="dark"] .hero .tools { background: color-mix(in srgb, var(--paper) 90%, transparent); } html[data-theme="dark"] .hero .gtr { --sil: #D9D7D2; } /* ── resources: the license band mixes off --paper, so its sage links need the light end of the sage ramp on a dark ground ──────────────────────── */ html[data-theme="dark"] .lic a { color: var(--sage-1); } html[data-theme="dark"] .lic svg { stroke: var(--sage-1); } /* ── theme toggle button (markup lives in each page's chrome) ───────────── */ .theme-toggle{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid var(--line); background:transparent;color:var(--ink-2);display:inline-grid;place-items:center;cursor:pointer; padding:0;transition:.15s;-webkit-tap-highlight-color:transparent} .theme-toggle:hover{color:var(--ink);border-color:var(--ink-3)} .theme-toggle svg{width:17px;height:17px;display:block} .theme-toggle .tt-sun{display:none} .theme-toggle .tt-moon{display:block} @media(max-width:400px){.theme-toggle{width:31px;height:31px}.theme-toggle svg{width:15px;height:15px}} html[data-theme="dark"] .theme-toggle .tt-sun{display:block} html[data-theme="dark"] .theme-toggle .tt-moon{display:none}