/** * Light theme. * * Every page in this product ships its own `:root{…}` block of dark values, with slightly * different names for the same ideas (--panel here, --surface there, --sub and --body and --muted * all meaning "secondary text"). Rewriting nineteen pages onto one naming scheme would be a large, * risky change that touches every rule on every screen. * * So this does the opposite: it redefines the SAME names those pages already use, under * `:root[data-theme="light"]`. That selector is (0,2,0) against the pages' (0,1,0) `:root`, so it * wins wherever it is loaded from, and a page inherits the light theme without a single one of its * own rules changing. New pages get it free as long as they use the shared vocabulary. * * The palette is not "the dark one inverted". Inverting produces grey text on grey cards and a * teal that vibrates against white. These values were chosen so that every pairing the product * actually uses clears WCAG AA — there is a test that walks every page in this theme and measures * it, because contrast failures render perfectly happily and are only ever caught by measuring. * * The accent darkens from #4ec7bb to #0b6a61: the dark theme's mint is 1.9:1 on white and would be * illegible for every link and label on the site. */ :root[data-theme="light"] { /* Surfaces, back to front. Warm off-whites rather than paper white. A pure #fff card on a near-white page is what makes a light UI feel harsh — the whole screen sits at maximum luminance with nothing for the eye to rest on, and the card edges stop reading because there is no step between them. Dropping the page to #eef3f1 and the cards to #f9fbfa gives a visible step (0.074 in luminance, up from 0.059) at LOWER overall brightness, and every text pairing still clears AA. */ --bg: #eef3f1; --bg-alt: #e6edeb; --panel: #f9fbfa; --surface: #f9fbfa; --card: #f9fbfa; --elevated: #f2f6f5; --elev: #f2f6f5; --field: #ffffff; --code-bg: #eaf1ef; /* Lines. Dark hairlines on light surfaces, not white ones. */ --line: rgba(18, 49, 45, .13); --line-2: rgba(18, 49, 45, .2); --line2: rgba(18, 49, 45, .2); /* Text. --ink is primary; the rest are the various names pages use for secondary and tertiary. Each is dark enough to clear 4.5:1 on both --panel and --bg. */ --ink: #12312d; --body: rgba(18, 49, 45, .82); --sub: rgba(18, 49, 45, .78); --muted: rgba(18, 49, 45, .68); --dim: rgba(18, 49, 45, .68); --faint: rgba(18, 49, 45, .66); --code-fg: #0b3b36; /* Brand. Dark enough to read as text and as a border on white. */ --accent: #0b6a61; --teal: #0b6a61; --teal-ink: #0b5f58; --teal-dim: #d3ece8; --teal-deep: #0b5f58; --accent-ink: #0b5f58; --accent-soft: rgba(11, 106, 97, .1); --token: #0b5f58; --glow: rgba(11, 106, 97, .16); /* Status. The dark theme's pastels are 2:1 on white; these are their legible counterparts. */ --on-accent: #ffffff; --risk: #b4402a; --safe: #1c7a52; --ok: #1c7a52; --warn: #8a5a00; --amber: #8a5a00; --e: #b4402a; } /** * Things the variables cannot reach. * * A page-level rule that hardcodes a colour (`background:#0b1314` on an input, a dark gradient on * ) ignores the palette entirely. Rather than hunt every literal through nineteen files and * risk breaking the dark theme, the handful that actually matter are corrected here — scoped to * the light theme, so dark is untouched. */ :root[data-theme="light"] body { /* Most pages paint a teal radial glow over --bg for the dark look; at full strength it turns the top of a light page mint. Softened rather than removed, so the brand still reads. */ background-image: radial-gradient(900px 400px at 50% -10%, rgba(11, 106, 97, .07), transparent); background-color: var(--bg); } :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #ffffff; color: var(--ink); border-color: var(--line-2); } /* Placeholders. Several pages hardcode a near-white one, which is fine on a dark field and invisible on a light one — and no contrast checker sees a placeholder, so it fails silently. */ :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: rgba(18, 49, 45, .52) !important; } :root[data-theme="light"] code { background: var(--code-bg); color: var(--code-fg); border-color: var(--line); } /* …but not the code inside a terminal block, which keeps the block's own colours. */ :root[data-theme="light"] pre code { background: transparent; border-color: transparent; color: inherit; } /** * Code and terminal blocks stay DARK in both themes. * * This is a decision, not an oversight. The token highlighting in these blocks — the teal * `[EMAIL_1]` chips that are the whole point of the examples — is tuned against a dark ground, and * a terminal that looks like a terminal is the convention every developer already reads. Inline * `code` inside a sentence does follow the theme, because that is body text. */ :root[data-theme="light"] pre { background: #070c0d; border-color: rgba(255, 255, 255, .1); color: #cfeee8; } :root[data-theme="light"] pre code, :root[data-theme="light"] pre * { color: inherit; } :root[data-theme="light"] pre .tok, :root[data-theme="light"] pre .token { color: #7fe3d3; } /** * Text ON the accent. * * Pages hardcoded a near-black (#04100e) for the label on a filled teal button — correct against * the dark theme's mint, and 3.82:1 against the light theme's deeper teal. Rather than enumerate * every button class on every page (and miss the next one), the literal was turned into * `var(--on-accent,#04100e)` at each site: the fallback keeps dark byte-identical, and light * supplies white, which is 5.06:1 on the same teal. */ :root[data-theme="light"] { --on-accent: #ffffff; --ph-ink: #ffffff; } /* `.snippet` is a code block that happens not to be a

; same decision applies. */
:root[data-theme="light"] .snippet { background: #070c0d; color: #cfeee8; }

/* A few page rules name a colour outright. Each of these is light-on-dark by construction. */
:root[data-theme="light"] .disclaim { color: #7a2a18; }          /* was #ffcdbf on a salmon tint */
:root[data-theme="light"] .foot { color: var(--muted); }         /* was rgba(157,179,175,.8) */
:root[data-theme="light"] .lockwrap.locked > .lockveil { background: rgba(255, 255, 255, .72); }  /* was a near-black veil */

/**
 * Gradient surfaces. A `background: linear-gradient(...)` of literal colours is invisible to the
 * palette AND to any audit that reads `backgroundColor` (a gradient computes the colour as
 * transparent), so these are the surfaces most likely to be left behind in a theme switch — and
 * least likely to be noticed by a checker. Named explicitly for that reason.
 */
:root[data-theme="light"] .sidebar { background: linear-gradient(180deg, #f9fbfa, #eef3f1); }
:root[data-theme="light"] .audit,
:root[data-theme="light"] .final { background: linear-gradient(180deg, #f9fbfa, #eef3f1); }

/**
 * Inside a region that stays dark, the palette must stay dark too.
 *
 * These blocks are full of text that reads `var(--dim)` and `var(--ink)`. Flip those to their light
 * values and every label inside a black terminal turns black. Re-declaring the dark values on the
 * region itself keeps the whole subtree coherent, whichever theme the page is in.
 */
:root[data-theme="light"] pre,
:root[data-theme="light"] .snippet,
:root[data-theme="light"] .demo,
:root[data-theme="light"] .demo-wrap,
:root[data-theme="light"] [data-theme-fixed] {
  --ink: #f4f8f7;
  --body: rgba(244, 248, 247, .68);
  --sub: rgba(244, 248, 247, .64);
  --muted: rgba(244, 248, 247, .56);
  --dim: rgba(244, 248, 247, .56);
  --faint: rgba(244, 248, 247, .54);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --accent: #4ec7bb; --teal: #4ec7bb; --token: #7fe3d3; --on-accent: #04100e;
  --panel: #0f1719; --card: #111b1c; --elevated: #131f20;
  --risk: #ff9a80; --safe: #59c193; --ok: #59c193; --warn: #ffbe5c; --amber: #e0a441;
}

/* Sticky bars that hardcode a translucent near-black. */
/* The extension popup's header paints its own near-black. */
:root[data-theme="light"] header { background: linear-gradient(180deg, #f9fbfa, #eef3f1); }

:root[data-theme="light"] .topbar { background: rgba(249, 251, 250, .88); }
:root[data-theme="light"] .nav,
:root[data-theme="light"] header.nav { background: rgba(246, 249, 248, .86); }

/**
 * The guided walkthrough.
 *
 * tour.js injects its own