/* Amboras design tokens — the ONLY place a custom property is defined. * * Linked by public/index.html (manager app) and public/library.html (the public, * no-auth whole-library share page at /library?s=). Both previously carried * their own duplicate :root pair, which is how they drifted apart. * * No component rules belong here. Bump the ?v= in both tags on every edit — * library.html is public, so a stale token file is visible outside the company. * * Task 6 split this into four comment-anchored blocks below — find them by their * marker comment, not by selector (there are two bare `:root` blocks). The marker * text is deliberately not repeated here in this header, so a text search for it * lands only on the real block: * - the theme-independent block: the radius ramp, spacing, control heights, * easing, the type scale, and the handful of colour tokens (podium medals, * script-renderer highlight marks/directives) that are Amboras' own brand * palette rather than SideShift-derived surface colours — they read fine * against either background and have no light-mode source to derive an * alternate from. The calendar status pills (`--cal-*`) used to live here * too, but Task 5b (light mode) found they were never legible in light — * see the light/dark blocks below. * - the light block: plain `:root`, the paint when no `data-theme` attribute is * present and the OS is not asking for dark (the @tokens system block below * is the other half of that "no attribute" case). Surface/text/accent/status * values started as a SideShift extraction (docs/ui-redesign/reference/sideshift-tokens.md) but were re-toned to * the redesign v2 palette, so read the block itself, not that document, for the * current numbers. The three `-veil` tokens and `--shadow-card` were never part of * that extraction (SideShift has no frosted- * glass chrome to scrape): the veils follow the same formula the dark veils * already use — the matching opaque layer's RGB at the same alpha — because * leaving them at dark's near-opaque values would paint a black bar over the * header/sidebar/toolbar in light mode. * - the dark block: `:root[data-theme="dark"]`, today's palette, byte-for-byte, * except `--r`/`--r-sm` (the one deliberate radius-ramp change, see below — * it lives in the shared block since it applies to both themes identically). * - the system block: the same declarations again, behind * `@media (prefers-color-scheme:dark)` and scoped to a document carrying * NEITHER attribute value. This is what makes the portals' "System" setting a * real third state rather than a synonym for dark. It is a copy of the dark * block and must be edited alongside it. * * `data-theme` is an attribute set on by the boot script in index.html * (window.__ambSetTheme), NOT a body class. It has three states: "dark" and * "light" are written as the attribute, and "system" is the ABSENCE of it. * public/library.html's own `body.creator-portal` already shadows several of these tokens for its subtree, * and a substitution resolving against the wrong scope shipped a real bug there * once already. A second class-based theme scope would double that hazard; the * attribute-on-:root form only ever adds a second, higher-specificity match on * the same element, so nothing is shadowed. */ /* @tokens shared — identical in both themes */ :root{ /* radius ramp — --r and --r-sm are the one deliberate visual change in this task (10px->12px, 7px->8px), adopting SideShift's ramp. --r-md/--r-lg keep today's values; --r-xs/--r-xl/--r-2xl/--r-full are new and not yet consumed anywhere, added for the type/spacing work this unblocks. */ --r-xs:4px; --r-sm:8px; --r:12px; --r-md:12px; --r-lg:14px; --r-xl:20px; --r-2xl:24px; --r-full:9999px; /* spacing (4px base) — new, not yet consumed anywhere */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; /* control heights — new, not yet consumed anywhere */ --ctl-xs:24px; --ctl-sm:32px; --ctl-md:40px; --ctl-lg:48px; --ctl-xl:56px; --ease:cubic-bezier(.2,.8,.2,1); /* type scale (SideShift-derived) — new, not yet consumed anywhere; Geist is not adopted (no build step in this project), only sizes/weights/tracking carry over */ --type-h1:44px; --type-h2:29px; --type-h3:23px; --type-lead:22px; --type-body:17px; --type-button:14px; --type-number:20px; --type-small:14px; --type-subtitle:12px; --w-heading:550; --w-body:350; --w-button:600; --w-number:800; --w-small:550; --tracking-tight:-.02em; /* podium — Amboras brand colours, never redefined per-theme */ --gold:#E3B341; --silver:#9FB0C9; --bronze:#C08552; /* script-renderer highlight marks — small self-contained mark backgrounds; contrast is against their own text, not the page background */ --hl-yellow:#caa700; --hl-green:#2f9e44; --hl-blue:#3B6FF5; --hl-pink:#d6336c; --hl-orange:#e8590c; --hl-red:#e03131; /* script-renderer callouts/directives */ --sr-gap:6px; --sr-link:#5B86FF; --sr-section:var(--text-1); --sr-small:var(--text-3); --sr-dir-bg:rgba(59,111,245,.1); --sr-dir-bd:#3B6FF5; --sr-dir-tx:var(--text-1); --sr-say:#3B6FF5; --sr-say-bg:rgba(59,111,245,.07); /* drop-shadow / control-accent darkening colour — always black at a fixed alpha regardless of theme (shadows read the same on light or dark chrome), so unlike the calendar status pills above this one genuinely has no per-theme variant and stays here rather than being duplicated into both theme blocks */ --scrim:rgba(0,0,0,.45); /* redesign v2 kit — theme-independent */ --row-h:58px; --sheet-w:640px; --sheet-w-wide:680px; --dialog-w:520px; --dialog-w-form:640px; --dialog-w-wide:820px; --ctl-row:36px; --ctl-bar:32px; --ctl-card:28px; --tabular:"tnum" 1; } /* @tokens light — the new default. Surface/text/accent/status values are the redesign v2 palette (spec §3): the original SideShift extraction (docs/ui-redesign/reference/sideshift-tokens.md) was re-toned to the neutral #f4f5f7 / #fbfbfc / #ffffff surface ramp and the #4f5bd5 accent family, so the numbers here no longer match that document. The three -veil tokens and --shadow-card were never part of the extraction (see file header). */ :root{ color-scheme:light; --bg-app:#f4f5f7; --bg-app-gradient:none; --bg-sidebar:#fbfbfc; --surface-1:#ffffff; --surface-2:#f8f9fb; --surface-3:#7b818c0d; --surface-4:#7b818c14; --bg-inset:#f4f5f7; --bg-app-veil:rgba(244,245,247,.86); --bg-sidebar-veil:rgba(251,251,252,.96); --surface-1-veil:rgba(255,255,255,.96); --border:#e3e5ea; --border-strong:#d5d8de; --text-1:#111318; --text-2:#6b7280; --text-3:#9aa0a8; --accent:#4f5bd5; --accent-hover:#3f4bc0; --accent-press:#3541aa; --on-accent:#ffffff; /* --accent-bright is the TEXT half of the pale-accent-tint family: .nav-item.on, .side-btn.acc, .note, .tag10, .spill.signed/.paid, .cp-chip.on, .script-day.on, .kcol-h .kc, .ap-st.new, .apx-stage-btn.on, .script-group-chip, .trk-version-chip, .posts-family-name and .trk-scriptchip all set it on a --accent-subtle fill. Light used to have it equal to --accent, which was under AA at 13px on --accent-subtle — on .nav-item.on, the most-looked-at element in the app. Fixed exactly the way --caldhead-wk-tx below was: drop to --accent-press's darker blue, same hue family, no new colour introduced. On the redesign v2 palette #3541aa measures 7.45:1 on --accent-subtle (#eef0ff), 8.44:1 on --surface-1, 8.16:1 on --bg-sidebar and 7.74:1 on --bg-app, so every surface this token lands on in light clears AA with room to spare (plain --accent #4f5bd5 would be 4.89:1 on --accent-subtle — passing, but with none). The single place light uses it as a FILL (.lb-control-dot.cpm, a 7px dot) only gains contrast. Dark is untouched. */ --accent-subtle:#eef0ff; --accent-line:#a9b0f0; --accent-bright:#3541aa; --up:#15803d; --up-weak:#dcfce7; --down:#b91c1c; --down-weak:#fee2e2; --warn:#b45309; --warn-weak:#fef3c7; --tt:#202020; --tt-bg:#f0f0f0; --ig:#E1568F; --yt:#F0463F; /* feedback round 2 (P5) — the platform BADGE fill/text pair, distinct from --ig/--yt above (those stay as plain accent text elsewhere, e.g. .hchip.ig, the profile "Platforms" split labels — out of scope, not broken). index.html's .pbadge.b-ig/.b-yt used to bake a dark literal (ig) / a low-alpha rgba tint + hardcoded pale text (ig/yt) that only read against a dark page. Light here is a pale same-hue tint (same family as --down-weak's #fee9eb) with a darkened, AA-ish text, same triad tokens.css already uses for --cal-*-bg/-tx. */ --ig-bg:#fbe4ee; --ig-tx:#9c2160; --yt-bg:#fde3e1; --yt-tx:#b3261e; --heat0:#f4f5f7; --shadow-pop:0 12px 40px rgba(16,24,40,.16); --shadow-sticky:0px 2px 4px -1px #01416314,0px 0px 0px 1px #20202014; --shadow-card:0 1px 2px rgba(16,24,40,.04); /* --bg-well: the darkest inset surface, one step below --bg-inset. Was the literal #0B0B0E baked into text inputs/selects/textareas, the search input, post/product cover placeholders, and the top-of-page decorative gradient. Not the same token as --bg-inset: the pre-existing literal (#0B0B0E) is a few bits off from --bg-inset's dark value (#08080A), and dark must stay byte-exact, so this is deliberately a second, separate "inset" tier. In light it's set equal to --bg-inset's light value for visual consistency. */ --bg-well:#f6f6f6; /* hover fill for .btn.primary / .side-btn.acc (both use --text-1 as their resting fill). Dark keeps the existing #FFFFFF; light was ALSO hardcoded to #FFFFFF, which put a white hover fill on a near-white page — invisible. Light instead lightens the near-black resting fill a step, same direction as dark's lighten-toward-white hover. */ --btn-primary-hover-bg:#333333; /* fix round 1: .side-btn/.btn's resting-state gradient (also reused by .lb-asset-share, the Scripts/Assets "Share" pill, which carries the exact same two-stop literal). Dark keeps #17171B/#111114 exactly; light is a white-to-very-light-grey gradient so the button reads as a raised control against the panel, the same relationship dark's two near-black stops create. */ --btn-bg-a:#ffffff; --btn-bg-b:#f2f3f5; /* generic darken-on-hover fill, dark #1A1A20 preserved. Used by .side-btn:hover/.btn:hover and (a later commit) .caldhead[data-date]:hover — identical literal in both places pre-edit. NOT used for .gp or the boot-splash gate's .amb-choose button:hover, which also happen to share this literal but are out of scope (badge deferred; gate is theme-invariant). */ --hover-surface:#e9eaed; /* border that pairs with --hover-surface on .side-btn/.btn hover only. */ --btn-hover-border:#c9cbd2; /* the "no image yet" diagonal-stripe tile background on the Scripts & Assets library page (.lb-product-tile / .lb-asset-media-card placeholders). Dark keeps #131318/#17171d; light is a barely-there light-grey stripe pair, the same subtlety as dark's near-black-on-near-black pair. */ --media-placeholder-a:#eef0f3; --media-placeholder-b:#e3e5ea; /* the calendar's weekend/today column-header highlight (.caldhead.wk and .caldhead.today's base layer share this one literal pre-edit). Dark keeps #17171C; light is a soft blue tint, matching the existing var(--accent-bright) weekend-header text colour already in place. */ --caldhead-highlight-bg:#eef4fe; /* the "today" date number. Dark keeps its hardcoded #FFFFFF (barely distinguishable from an ordinary .dn's var(--text-1), which is #F4F4F5 in dark — the "today" emphasis really comes from the background/box-shadow, not the text colour). Light matches that relationship: same value as --text-1's light value, so "today" reads the same way it does in dark. */ --caldhead-today-tx:#202020; /* .caldhead.wk .dn (the weekend date number) and .dw/.dm (its day-of-week/ month labels) both used var(--accent-bright) directly. That token's light value was then #3c83f9 (same as --accent), only 3.62:1 against white at best, so once .caldhead.wk's background stopped being permanently dark (previous commit), this text became sub-4.5:1 regardless of which light background was chosen. Dark keeps --accent-bright's existing dark value (#8DAAFF, so dark is unaffected); light uses --accent-press's darker blue (#2560c0), 5.41:1 against --caldhead-highlight-bg, same hue family. Kept as a distinct token even though --accent-bright has since been darkened to the same pair of values for the same reason: this one is measured against --caldhead-highlight-bg, so the calendar header can be retuned without dragging every accent chip in the app with it. */ --caldhead-wk-tx:#2560c0; /* translucent version of --track-bg for the calendar's sticky legend bar backdrop-blur (rgba(13,13,16,.96) is exactly #0D0D10 decomposed to rgb). Dark keeps that literal; light follows this file's established veil formula (the matching opaque layer's RGB at the same alpha), using --track-bg's own light value #eceef1 -> rgb(236,238,241). */ --track-bg-veil:rgba(236,238,241,.96); /* calendar post-submission status — solid bg+tx pairs; contrast is internal to each pair, not composited against the page background. Light gets a pale same-hue tint fill with a dark same-hue text, the usual triad pattern (docs/ui-redesign/reference/sideshift-tokens.md); the bg values for ok/low/miss reuse this file's own --up-weak/--warn-weak/--down-weak exactly, since those already are "pale tint of that status colour". */ --cal-ok-bg:#e6f9ec; --cal-ok-tx:#0c5c2e; --cal-low-bg:#fff5e9; --cal-low-tx:#7a4a0a; --cal-miss-bg:#fee9eb; --cal-miss-tx:#a3172a; --cal-pending-bg:#f2ecff; --cal-pending-tx:#5b21b6; --cal-notyet-bg:#e9ebee; --cal-notyet-tx:#4b4e55; --cal-more-bg:#e5e9f3; --cal-more-tx:#37415a; /* .toast.err's chip (index.html, feedback round 2 VR3) — aliases this pair rather than inventing a third red-chip token: already an opaque, per-theme-tuned, always-legible triad, just reused under a name that matches where it's used. */ --toast-err-bg:var(--cal-miss-bg); --toast-err-tx:var(--cal-miss-tx); /* the "joined" chip keeps var(--accent) as its fill in both themes (no --cal-joined-bg token — that was already true before this task), so only the text is themed here; it has to be dark navy rather than white because white-on-#3c83f9 in light is 3.6:1 */ --cal-joined-tx:#0a1330; /* --track-bg / --seg-active-*: the segmented-control track and the calendar grid surface share one literal (#0D0D10) today, so they share one token. Light reads as a recessed grey track with a raised white active pill, the same relationship dark has (dark track darker-than-surroundings, active pill lighter-than-track). */ --track-bg:#eceef1; --seg-active-bg:#ffffff; --seg-active-tx:#202020; /* Overlay family — 145 literal rgba(255,255,255,.NN) / rgba(0,0,0,.NN) overlays were scattered through index.html as borders, inset "rim light" box-shadows, and faint background washes/gradient stops, all composited against DARK surfaces. The 16 groups used 3+ times (111 of 145 occurrences) are tokenized here; the remaining 26 single/double-use groups are left as literals (see task-5b-report.md for the list) for a later pass. Two families: --hairline-* (predominantly border/divider use, named by strength) and --tint-1..10 (predominantly background-wash / inset-highlight use, numbered strongest(1)->faintest(10) — too many close gradations for adjectives to stay meaningful, same ramp convention as --sp-1../--r-*). Dark keeps the exact rgba(255,255,255,..) literal; light is the same alpha over black, e.g. rgba(0,0,0,.08) for rgba(255,255,255,.08) — this flips a "light-catching" highlight into a "shadow" edge, which is the correct-looking direction for a raised/recessed surface on a light background too. */ --hairline-loud:rgba(0,0,0,.12); --hairline-strong:rgba(0,0,0,.1); --hairline:rgba(0,0,0,.08); --hairline-soft:rgba(0,0,0,.075); --hairline-faint:rgba(0,0,0,.07); --tint-1:rgba(0,0,0,.06); --tint-2:rgba(0,0,0,.055); --tint-3:rgba(0,0,0,.05); --tint-4:rgba(0,0,0,.045); --tint-5:rgba(0,0,0,.04); --tint-6:rgba(0,0,0,.035); --tint-7:rgba(0,0,0,.02); --tint-8:rgba(0,0,0,.018); --tint-9:rgba(0,0,0,.016); --tint-10:rgba(0,0,0,.015); /* fix round 1 (Task 3, Analytics big chart): the Views-series area fill under lineChartAxis(). Was a fourth hardcoded rgba(59,111,245,.NN) literal alongside sparkline's .10 and lineChart's .12 (both pre-existing, out of this fix round's scope, left as literals). Not a flat pale tint like --accent-subtle's #ebf2fe here — this fill draws OVER the chart's own gridlines (see lineChartAxis()), so an opaque colour would hide them; it stays translucent, matched to how sparkline's own unthemed rgba(59,111,245,.10) already reads against a light surface — the nearest real precedent this codebase has for "a chart fill in light mode". */ --chart-fill:rgba(59,111,245,.1); /* redesign v2 kit — light */ --chart-1:#4f5bd5; --chart-2:#15803d; --chart-3:#b45309; --chart-4:#b91c1c; --chart-5:#0e7490; --chart-6:#7c3aed; --chart-prev:#c7cad1; --badge-ok-bg:#dcfce7; --badge-ok-tx:#15803d; --badge-info-bg:#e0e7ff; --badge-info-tx:#3730a3; --badge-warn-bg:#fef3c7; --badge-warn-tx:#b45309; --badge-bad-bg:#fee2e2; --badge-bad-tx:#b91c1c; --badge-neu-bg:#eceef2; --badge-neu-tx:#4b5563; --badge-ig-bg:#fbe4ee; --badge-ig-tx:#9c2160; --badge-tt-bg:#eceef2; --badge-tt-tx:#111318; --badge-yt-bg:#fde7e7; --badge-yt-tx:#b3261e; /* Creator Filming (concept board, 2026-09-26): the bold FILM card inverts the page, the NEEDS FIXING header is John's red, and concept covers without an image get one of six video-dark tints (the same in both themes — they stand in for a video frame). */ --fm-hero-bg:#111318; --fm-hero-tx:#ffffff; --fm-hero-sub:rgba(255,255,255,.72); --fm-fix-bg:#B60000; --fm-fix-tx:#FFFFFF; --fm-fix-sub:rgba(255,255,255,.82); --fm-go-bg:#15803D; --fm-go-tx:#FFFFFF; --fm-empty-bg:#E4E4E7; --fm-empty-tx:#18181B; --fm-veil:rgba(9,9,11,.62); --fm-veil-tx:#F4F4F5; --fm-shade:rgba(9,9,11,.86); --fm-stage:#000000; --fm-tint-0:#1F2433; --fm-tint-1:#2A2440; --fm-tint-2:#35291C; --fm-tint-3:#1C3027; --fm-tint-4:#2F2230; --fm-tint-5:#2B2B1C; } /* @tokens dark — today's palette, byte-for-byte (radius ramp lives in @tokens shared and is the one deliberate exception — see file header). This is the default whenever the boot script sets data-theme="dark" on . */ :root[data-theme="dark"]{ color-scheme:dark; --bg-app:#09090B; --bg-app-gradient:none; --bg-sidebar:#0A0A0C; --surface-1:#101013; --surface-2:#151519; --surface-3:#1B1B21; --surface-4:#22222A; --bg-inset:#08080A; --bg-app-veil:rgba(9,9,11,.86); --bg-sidebar-veil:rgba(10,10,12,.96); --surface-1-veil:rgba(16,16,19,.96); --border:#242429; --border-strong:#33343B; --text-1:#F4F4F5; --text-2:#A1A1AA; --text-3:#71717A; --accent:#3B6FF5; --accent-hover:#5B86FF; --accent-press:#2E58C8; --on-accent:#ffffff; --accent-subtle:rgba(59,111,245,.12); --accent-line:rgba(91,134,255,.34); --accent-bright:#8DAAFF; --up:#22C55E; --up-weak:rgba(34,197,94,.1); --down:#F87171; --down-weak:rgba(248,113,113,.1); --warn:#FBBF24; --warn-weak:rgba(251,191,36,.11); --tt:#F4F4F5; --tt-bg:#1F1F24; --ig:#F472B6; --yt:#FF5A52; /* feedback round 2 (P5) — byte-identical to the literals the badge rule (index.html, grep "P5") replaced: #24242A was already close to --tt-bg (kept as --tt-bg exactly, a near-invisible shift); #F9A8D4/#FDA29B were the old hardcoded badge text, ig-bg/yt-bg the old rgba tints resolved to solid (rgba(244,114,182,.14)/rgba(255,90,82,.13) over this file's own dark card surfaces ~ these solids). See @tokens light for the derivation note. */ --ig-bg:#3a1526; --ig-tx:#F9A8D4; --yt-bg:#3a1614; --yt-tx:#FDA29B; --heat0:#111114; --shadow-pop:0 24px 80px rgba(0,0,0,.62),0 1px 0 rgba(255,255,255,.04) inset; --shadow-sticky:0 1px 0 var(--border),0 14px 30px rgba(0,0,0,.28); --shadow-card:0 1px 0 var(--border),0 8px 18px rgba(0,0,0,.24); /* Task 5b — byte-identical to the literal it replaced; see @tokens light. */ --bg-well:#0B0B0E; --btn-primary-hover-bg:#FFFFFF; /* fix round 1 — byte-identical to the literals they replaced. */ --btn-bg-a:#17171B; --btn-bg-b:#111114; --hover-surface:#1A1A20; --btn-hover-border:#3A3B44; --media-placeholder-a:#131318; --media-placeholder-b:#17171d; --caldhead-highlight-bg:#17171C; --caldhead-today-tx:#FFFFFF; --caldhead-wk-tx:#8DAAFF; --track-bg-veil:rgba(13,13,16,.96); --cal-ok-bg:#23845F; --cal-ok-tx:#F0FDF4; --cal-low-bg:#8A6424; --cal-low-tx:#FEF3C7; --cal-miss-bg:#8D2D45; --cal-miss-tx:#FFE4E6; --cal-pending-bg:#8B5CF6; --cal-pending-tx:#F3EEFF; --cal-notyet-bg:#26262C; --cal-notyet-tx:#6E6E7A; --cal-more-bg:#2C3140; --cal-more-tx:#AEB6C8; --toast-err-bg:var(--cal-miss-bg); --toast-err-tx:var(--cal-miss-tx); --cal-joined-tx:#EAF0FF; --track-bg:#0D0D10; --seg-active-bg:#1D1D23; --seg-active-tx:#fff; --hairline-loud:rgba(255,255,255,.12); --hairline-strong:rgba(255,255,255,.1); --hairline:rgba(255,255,255,.08); --hairline-soft:rgba(255,255,255,.075); --hairline-faint:rgba(255,255,255,.07); --tint-1:rgba(255,255,255,.06); --tint-2:rgba(255,255,255,.055); --tint-3:rgba(255,255,255,.05); --tint-4:rgba(255,255,255,.045); --tint-5:rgba(255,255,255,.04); --tint-6:rgba(255,255,255,.035); --tint-7:rgba(255,255,255,.02); --tint-8:rgba(255,255,255,.018); --tint-9:rgba(255,255,255,.016); --tint-10:rgba(255,255,255,.015); /* fix round 1 — byte-identical to the literal it replaced (lineChart()/lineChartAxis()'s prior default fill), see @tokens light for the full note. */ --chart-fill:rgba(59,111,245,.12); /* redesign v2 kit — dark */ --chart-1:#7c8cff; --chart-2:#4ade80; --chart-3:#fbbf24; --chart-4:#f87171; --chart-5:#67c7ff; --chart-6:#c4a5fc; --chart-prev:#3a3a44; --badge-ok-bg:#0f3d28; --badge-ok-tx:#4ade80; --badge-info-bg:#1e2352; --badge-info-tx:#a5b4fc; --badge-warn-bg:#3f2a0a; --badge-warn-tx:#fbbf24; --badge-bad-bg:#3f1212; --badge-bad-tx:#f87171; --badge-neu-bg:#1f1f23; --badge-neu-tx:#a7a7b0; --badge-ig-bg:#3d1230; --badge-ig-tx:#f9a8d4; --badge-tt-bg:#1f1f23; --badge-tt-tx:#c9c9d0; --badge-yt-bg:#3a1414; --badge-yt-tx:#f5a3a0; /* Creator Filming — see @tokens light. */ --fm-hero-bg:#F4F4F5; --fm-hero-tx:#09090B; --fm-hero-sub:#3F3F46; --fm-fix-bg:#B60000; --fm-fix-tx:#FFFFFF; --fm-fix-sub:rgba(255,255,255,.82); --fm-go-bg:#15803D; --fm-go-tx:#FFFFFF; --fm-empty-bg:#2A2A30; --fm-empty-tx:#FAFAFA; --fm-veil:rgba(9,9,11,.62); --fm-veil-tx:#F4F4F5; --fm-shade:rgba(9,9,11,.86); --fm-stage:#000000; --fm-tint-0:#1F2433; --fm-tint-1:#2A2440; --fm-tint-2:#35291C; --fm-tint-3:#1C3027; --fm-tint-4:#2F2230; --fm-tint-5:#2B2B1C; } /* @tokens system — "System" is a real third theme state, not a synonym for dark. __ambSetTheme("system") REMOVES the data-theme attribute, which lands on the light block above; this query is what makes an attribute-less document follow the OS instead. Both attribute values are excluded so an explicit choice always wins over the OS preference — :root[data-theme="dark"] would otherwise lose to this later block, and :root[data-theme="light"] (which resolves to the light block on bare :root) would be repainted dark on a dark-mode machine. KEEP IN SYNC WITH @tokens dark ABOVE — these declarations are a copy of that block's, byte for byte. Any token added, removed or retuned there must be made here in the same commit, or "System" and "Dark" drift apart. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ color-scheme:dark; --bg-app:#09090B; --bg-app-gradient:none; --bg-sidebar:#0A0A0C; --surface-1:#101013; --surface-2:#151519; --surface-3:#1B1B21; --surface-4:#22222A; --bg-inset:#08080A; --bg-app-veil:rgba(9,9,11,.86); --bg-sidebar-veil:rgba(10,10,12,.96); --surface-1-veil:rgba(16,16,19,.96); --border:#242429; --border-strong:#33343B; --text-1:#F4F4F5; --text-2:#A1A1AA; --text-3:#71717A; --accent:#3B6FF5; --accent-hover:#5B86FF; --accent-press:#2E58C8; --on-accent:#ffffff; --accent-subtle:rgba(59,111,245,.12); --accent-line:rgba(91,134,255,.34); --accent-bright:#8DAAFF; --up:#22C55E; --up-weak:rgba(34,197,94,.1); --down:#F87171; --down-weak:rgba(248,113,113,.1); --warn:#FBBF24; --warn-weak:rgba(251,191,36,.11); --tt:#F4F4F5; --tt-bg:#1F1F24; --ig:#F472B6; --yt:#FF5A52; /* feedback round 2 (P5) — byte-identical to the literals the badge rule (index.html, grep "P5") replaced: #24242A was already close to --tt-bg (kept as --tt-bg exactly, a near-invisible shift); #F9A8D4/#FDA29B were the old hardcoded badge text, ig-bg/yt-bg the old rgba tints resolved to solid (rgba(244,114,182,.14)/rgba(255,90,82,.13) over this file's own dark card surfaces ~ these solids). See @tokens light for the derivation note. */ --ig-bg:#3a1526; --ig-tx:#F9A8D4; --yt-bg:#3a1614; --yt-tx:#FDA29B; --heat0:#111114; --shadow-pop:0 24px 80px rgba(0,0,0,.62),0 1px 0 rgba(255,255,255,.04) inset; --shadow-sticky:0 1px 0 var(--border),0 14px 30px rgba(0,0,0,.28); --shadow-card:0 1px 0 var(--border),0 8px 18px rgba(0,0,0,.24); /* Task 5b — byte-identical to the literal it replaced; see @tokens light. */ --bg-well:#0B0B0E; --btn-primary-hover-bg:#FFFFFF; /* fix round 1 — byte-identical to the literals they replaced. */ --btn-bg-a:#17171B; --btn-bg-b:#111114; --hover-surface:#1A1A20; --btn-hover-border:#3A3B44; --media-placeholder-a:#131318; --media-placeholder-b:#17171d; --caldhead-highlight-bg:#17171C; --caldhead-today-tx:#FFFFFF; --caldhead-wk-tx:#8DAAFF; --track-bg-veil:rgba(13,13,16,.96); --cal-ok-bg:#23845F; --cal-ok-tx:#F0FDF4; --cal-low-bg:#8A6424; --cal-low-tx:#FEF3C7; --cal-miss-bg:#8D2D45; --cal-miss-tx:#FFE4E6; --cal-pending-bg:#8B5CF6; --cal-pending-tx:#F3EEFF; --cal-notyet-bg:#26262C; --cal-notyet-tx:#6E6E7A; --cal-more-bg:#2C3140; --cal-more-tx:#AEB6C8; --toast-err-bg:var(--cal-miss-bg); --toast-err-tx:var(--cal-miss-tx); --cal-joined-tx:#EAF0FF; --track-bg:#0D0D10; --seg-active-bg:#1D1D23; --seg-active-tx:#fff; --hairline-loud:rgba(255,255,255,.12); --hairline-strong:rgba(255,255,255,.1); --hairline:rgba(255,255,255,.08); --hairline-soft:rgba(255,255,255,.075); --hairline-faint:rgba(255,255,255,.07); --tint-1:rgba(255,255,255,.06); --tint-2:rgba(255,255,255,.055); --tint-3:rgba(255,255,255,.05); --tint-4:rgba(255,255,255,.045); --tint-5:rgba(255,255,255,.04); --tint-6:rgba(255,255,255,.035); --tint-7:rgba(255,255,255,.02); --tint-8:rgba(255,255,255,.018); --tint-9:rgba(255,255,255,.016); --tint-10:rgba(255,255,255,.015); /* fix round 1 — byte-identical to the literal it replaced (lineChart()/lineChartAxis()'s prior default fill), see @tokens light for the full note. */ --chart-fill:rgba(59,111,245,.12); /* redesign v2 kit — dark */ --chart-1:#7c8cff; --chart-2:#4ade80; --chart-3:#fbbf24; --chart-4:#f87171; --chart-5:#67c7ff; --chart-6:#c4a5fc; --chart-prev:#3a3a44; --badge-ok-bg:#0f3d28; --badge-ok-tx:#4ade80; --badge-info-bg:#1e2352; --badge-info-tx:#a5b4fc; --badge-warn-bg:#3f2a0a; --badge-warn-tx:#fbbf24; --badge-bad-bg:#3f1212; --badge-bad-tx:#f87171; --badge-neu-bg:#1f1f23; --badge-neu-tx:#a7a7b0; --badge-ig-bg:#3d1230; --badge-ig-tx:#f9a8d4; --badge-tt-bg:#1f1f23; --badge-tt-tx:#c9c9d0; --badge-yt-bg:#3a1414; --badge-yt-tx:#f5a3a0; /* Creator Filming — see @tokens light. */ --fm-hero-bg:#F4F4F5; --fm-hero-tx:#09090B; --fm-hero-sub:#3F3F46; --fm-fix-bg:#B60000; --fm-fix-tx:#FFFFFF; --fm-fix-sub:rgba(255,255,255,.82); --fm-go-bg:#15803D; --fm-go-tx:#FFFFFF; --fm-empty-bg:#2A2A30; --fm-empty-tx:#FAFAFA; --fm-veil:rgba(9,9,11,.62); --fm-veil-tx:#F4F4F5; --fm-shade:rgba(9,9,11,.86); --fm-stage:#000000; --fm-tint-0:#1F2433; --fm-tint-1:#2A2440; --fm-tint-2:#35291C; --fm-tint-3:#1C3027; --fm-tint-4:#2F2230; --fm-tint-5:#2B2B1C; } }