/* ============================================================ LIGHT / PASTEL THEME — "Daylight" A calm, airy counterpart to the default dark studio UI. Activated by (set by a tiny inline script in index.html so it applies before first paint — no flash). It works entirely by re-pointing the design tokens defined in base.css. Every module reads from these variables, so the whole app re-skins from this one block — no per-component overrides. Deliberately NOT re-themed: dark scrims/gradients that sit over live video or the camera feed (fullscreen tag dock, camera HUD, review/presentation stages). Those stay dark in both themes because they overlay footage, where light chrome would wash out. ============================================================ */ :root[data-theme="light"]{ /* ── surfaces ── warm paper white; cards are clean white that lift off the page with soft hairlines + gentle shadows ── */ --bg:#f4f3ee; --s1:#ffffff; --s2:#f2f0ea; --s3:#ebe8e0; /* ── hairlines ── the brand ink at low alpha, so every rule and divider on the page is the same colour as the type above it ── */ --b:rgba(0,25,45,0.08); --bm:rgba(0,25,45,0.14); --bs:rgba(0,25,45,0.24); /* ── text ── the brand ink itself (#00192d). It replaced a slate #2b303a, which lifted body text from 12.6:1 to 16.1:1 on the paper ground. The two muted roles were re-derived from the ink at the SAME contrast the slate ones had — 5.4:1 and 3.0:1, against 5.3:1 and 3.0:1 before — so the hierarchy is unchanged and only its hue moved. Deliberately not "improved" while passing: the 2026-08-20 darkening pass was built and reverted, and the bright, airy palette is the decision that survived. ── */ --t:#00192d; --t2:#516678; --t3:#7d8f9e; /* ── primary accent ── the brand lavender #635be0, exactly. It replaces #7d74c9, a softened stand-in from before the palette was settled. 4.6:1 as text on the paper ground and 5.1:1 the other way round, so it works as ink and as a fill. ── */ --ac:#635be0; --acd:rgba(99,91,224,0.14); --acb:rgba(99,91,224,0.42); --ac-rgb:99,91,224; --on-ac:#ffffff; /* ── success ── the brand green cannot be text here (#afe259 on paper is 1.6:1), so the ink darkens to a 4.5:1 leaf while the fill and edge keep the brand hue. ── */ --ok:#4c7c0f;--okd:rgba(175,226,89,0.22);--okb:rgba(175,226,89,0.62); /* ── secondary accents ── muted pastels (dusty rose / sky / apricot) ── */ /* --rd is chrome, so it stays the dusty rose. --rd-str has to READ on paper, where the rose is 2.9:1 — it takes the deeper brick the two public-page stylesheets had each written out for form errors. */ --rd:#dd757a;--rdd:rgba(221,117,122,0.13);--rd-str:#b3261e; --bl:#6a9fd6;--bld:rgba(106,159,214,0.13); --am:#d99a55;--amd:rgba(217,154,85,0.15); /* ── chrome ── translucent paper bar, soft slate shadows, a light backdrop scrim ── */ --nav-bg:rgba(244,243,238,0.85); --scrim:rgba(0,25,45,0.30); --shadowlg:0 8px 26px rgba(0,25,45,0.13); --shadowmd:0 10px 28px rgba(0,25,45,0.12); --shadowxl:0 20px 60px rgba(0,25,45,0.16); /* ── softer, friendlier geometry (type stays Outfit, same as dark) ── */ --r:14px;--rsm:9px; } /* html/body carry the background directly in a few spots */ :root[data-theme="light"] body{background:var(--bg)} /* Selection rings drawn in #fff (color swatches, timeline marker) look washed out on white — switch them to the ink border colour. */ :root[data-theme="light"] .sw.selected, /* The lime-tinted literals baked into a handful of "count" badges in tagger.css predate the token system; nudge them onto the accent so they match the rest of the light theme. */ :root[data-theme="light"] .cam-count, :root[data-theme="light"] .stc-count{ background:var(--acd);border-color:var(--acb);color:var(--ac) } /* ── TAG BUTTONS ── The per-tag colours (data.js TC[]) are neon — tuned for the dark UI, where a thin bright stripe pops. On white that same stripe vanishes. For the light theme each button instead gets a soft wash of its own colour plus a bold, darkened colour edge: readable for ANY hue and in keeping with the pastel tag cards in the design references. color-mix derives both shades from the live --tc, so it works for custom colours too. (Supported on all current mobile browsers; older ones gracefully fall back to the base faint stripe.) */ :root[data-theme="light"] .tag-btn{ background:color-mix(in srgb, var(--tc,#8a90a0) 12%, #fff); border-color:color-mix(in srgb, var(--tc,#8a90a0) 32%, transparent); color:var(--t) } :root[data-theme="light"] .tag-btn .tsc{color:color-mix(in srgb, var(--tc,#8a90a0) 58%, #2b2734)} :root[data-theme="light"] .tag-btn::before{ width:4px;opacity:1; background:color-mix(in srgb, var(--tc,#8a90a0) 62%, #2b2734) } /* The two-level chip takes the same darkened colour edge — it is the same tag on the same panel, drawn as a chip rather than a button. Only the STRIPE is shared: the chip's own wash / hover / pending rules already carry the hue at this size, and re-declaring them here would outrank .tl-chip.pending and .tl-chip.current, which are accent states rather than tag ones. Its own rule rather than a second selector on the one above, because the fallback differs: with no --tc the mix is invalid and the bar disappears, which is what the tag board's colourless 2nd-level names need (see the note beside .tl-chip::before in css/tagger.css). #8a90a0 there would draw one. */ :root[data-theme="light"] .tl-chip::before{ width:4px;opacity:1; background:color-mix(in srgb, var(--tc) 62%, #2b2734) } :root[data-theme="light"] .tag-btn:disabled, :root[data-theme="light"] .tl-chip:disabled{opacity:.42} :root[data-theme="light"] .tag-btn:not(:disabled):hover{ background:color-mix(in srgb, var(--tc,#8a90a0) 20%, #fff); border-color:color-mix(in srgb, var(--tc,#8a90a0) 48%, transparent); color:var(--t) } :root[data-theme="light"] .tag-btn.flash{ background:color-mix(in srgb, var(--tc,#8a90a0) 30%, #fff); border-color:color-mix(in srgb, var(--tc,#8a90a0) 60%, #2b2734); color:var(--t) } /* The tag-log accent block is coloured inline (style="background:"), so it can't be re-mixed via a variable — darken it with a filter so the same neon hues stay legible against the light log panel. */ :root[data-theme="light"] .log-acc{filter:brightness(.72) saturate(1.15)} /* The fullscreen tag docks (Live / Retag / Stand) sit OVER video and stay dark in both themes — so keep their original bright stripe there rather than the light-panel darkening above. IT SETS THE COLOUR AND NOTHING ELSE, AND THAT IS THE FIX. It used to also say `width:3px;opacity:.45`, which is not "the original bright stripe" — it is dimmer than both the base 4px/.85 and the dock's own 5px/1, and being the most specific selector in the file it also beat Sunlight mode's 7px, so the highest-contrast setting in the app quietly did nothing to the stripe on a light-theme phone. Width and opacity now come from the dock rules, where they are decided once and where Sunlight can still raise them. */ :root[data-theme="light"] #tb-live.fs-on .tag-btn::before, :root[data-theme="light"] #tb-retag.fs-on .tag-btn::before, :root[data-theme="light"] #tb-standtag.fs-on .tag-btn::before, :root[data-theme="light"] #tb-standtag.fs-on .tl-chip::before{ background:var(--tc) }