@godxjp/ui 31.31.7 → 32.0.0

package/docs/themes/flat.css

@@ -1,466 +0,0 @@
-/**
- * flat theme — the SECOND theme, and the control.
- *
- * gh#882: "adding a second theme must mean one new CSS file and one new row, never a page edit".
- * This is that file. It proves the switch is real rather than promised, and — because it removes
- * every corner, every shadow and every translucency the default theme spends — it is also the
- * control: what these components look like when the decoration is taken away.
- *
- * SAME CONSTRAINT AS `glassmorphism.css`, no exceptions: every line below is a
- * `--custom-property` declaration under `[data-theme-style="flat"]`. No `background:`, no
- * `border-radius:`, no `box-shadow:`, no selector into a `.ui-*` class. What cannot be expressed
- * that way is written down as a finding on the page, not worked around here.
- *
- * ── FINDING 1 · one number, sixty-eight declarations ─────────────────────────────────────────
- * "Square the corners" is one design decision and it costs SIXTY-EIGHT lines. `--radius` is the
- * seed; `--radius-xs … --radius-2xl` are `calc(var(--radius) · φⁿ)` declared at `:root`
- * (src/styles/base.css:169-176); and 61 component knobs are `--x-radius: var(--radius-<step>)`,
- * also declared at `:root` (src/tokens/components/*.css). A `var()` substitutes where the
- * REFERENCING property is declared, so all 68 resolve once against the root's `--radius` and
- * inherit the frozen result — the `:root` freeze rule of docs/TOKEN-RESOLUTION.md §3, at scale.
- * Setting `--radius: 0` here alone moves NOTHING except the handful of call sites that read
- * `--radius` directly. This is the same trap `docs/showcase/theme-customization.tsx` records for
- * `--ring`, except there it was one line and here it is sixty-seven.
- *
- * The list below is GENERATED, not hand-kept:
- *   grep -rhoE "^\s*--[a-z0-9-]*radius[a-z0-9-]*:\s*var\(--radius[a-z0-9-]*\)" src/tokens/
- * A hand-kept list is what went blind in gh#854, and a theme that squares 40 of 61 corners looks
- * like a bug rather than a style.
- *
- * ── FINDING 1b · the brand INK does not follow the seed to a safe ratio, and this theme SHOWS it
- * On a light canvas the seed-derived link/active ink fails AA at both ends of the seed range:
- * measured with `measure-glass.mjs`, the coral seed puts six strings at 2.11-3.71:1 and the citron
- * seed (#FFD400) puts the same six at 1.07-1.43:1 — Sidebar active item, NavList active item,
- * MegaMenu trigger, Anchor link, `Button variant="link"`. `tenantTheme()` guarantees
- * `--primary` against `--primary-foreground`; it says nothing about `--primary` used as INK on the
- * page's own surface, and nothing derives a safe value for that.
- *
- * The `base` row — no theme file at all — keeps those failures, and that is where the finding
- * lives: a consumer who hands the library a light brand colour gets inaccessible navigation ink
- * and has nothing to say about it, because the seed is the only input. This file DOES restate the
- * roles, darker, so the matrix also shows the second half of the answer: the gap is reachable by
- * a theme, one line per role, once you know which of them are `:root`-bound. Both columns are
- * needed — base is the defect, flat and glass are the proof it can be closed from outside.
- *
- * ── FINDING 2 · the pill is a SHAPE, not a corner ────────────────────────────────────────────
- * Eight knobs mirror `--radius-pill` (Switch's track, ScrollArea's thumb, the count chips on
- * Segmented/Tabs/Toggle) and one mirrors `--radius-sharp`. They are deliberately left alone: a
- * squared Switch reads as a Checkbox, which is a meaning change, not a style change. A flat theme
- * that squares them would be measuring its own taste rather than the token model.
- *
- * ── FINDING 3 · the shadow mirrors are mostly FIXED now, and the exceptions are visible ──────
- * gh#880 turned `--card-shadow` / `--sheet-shadow` / `--popover-shadow` / `--tooltip-shadow` /
- * `--segmented-item-selected-shadow` into `initial` knobs, so restating the six foundation steps
- * reaches them at the call site — no per-mirror restatement, unlike the radius family above and
- * unlike what `glassmorphism.css` had to do before that fix. Six mirrors are still frozen
- * `var(--shadow-*)` bindings at `:root` and each needs its own line; they are listed as such.
- *
- * ── FINDING 4 · this theme owes no translucency fallback, and that is not an omission ────────
- * docs/TOKEN-RESOLUTION.md §5 puts `prefers-reduced-transparency` and `@supports not
- * (backdrop-filter)` on the theme that made a surface translucent. Nothing here is translucent and
- * no blur knob is turned on, so there is nothing to fall back to. The absence is the proof.
- */
-[data-theme-style="flat"] {
-  /* ── Corners. The seed, its six derived steps, then every frozen component mirror. ────────── */
-  --radius: 0;
-  --radius-xs: 0;
-  --radius-sm: 0;
-  --radius-md: 0;
-  --radius-lg: 0;
-  --radius-xl: 0;
-  --radius-2xl: 0;
-
-  --actions-radius: 0;
-  --app-launcher-launchpad-mark-radius: 0;
-  --app-launcher-launchpad-tile-radius: 0;
-  --app-launcher-mark-radius: 0;
-  --app-launcher-tile-radius: 0;
-  --attachments-card-radius: 0;
-  --avatar-square-radius: 0;
-  --badge-radius: 0;
-  --button-radius: 0;
-  --calendar-day-radius: 0;
-  --calendar-weekday-radius: 0;
-  --card-radius: 0;
-  --card-service-launcher-icon-radius: 0;
-  --cascader-result-radius: 0;
-  --chart-trend-bar-radius: 0;
-  --chat-bubble-radius: 0;
-  --code-block-radius: 0;
-  --control-affix-action-radius: 0;
-  --control-radius: 0;
-  --conversations-item-radius: 0;
-  --descriptions-border-radius: 0;
-  --draggable-panel-radius: 0;
-  --float-button-group-radius: 0;
-  --legal-document-toc-item-radius: 0;
-  --logo-radius: 0;
-  --mega-menu-link-radius: 0;
-  --mega-menu-panel-radius: 0;
-  --mega-menu-trigger-radius: 0;
-  --menu-item-radius: 0;
-  --popover-radius: 0;
-  --progress-breakdown-radius: 0;
-  --prose-code-radius: 0;
-  --prose-image-radius: 0;
-  --segmented-item-radius: 0;
-  --segmented-track-radius: 0;
-  --skeleton-element-radius: 0;
-  --skeleton-radius: 0;
-  --slider-tooltip-radius: 0;
-  --stat-card-icon-radius: 0;
-  --steps-nav-radius: 0;
-  --table-skeleton-radius: 0;
-  --tabs-add-radius: 0;
-  --tabs-card-radius: 0;
-  --tabs-overflow-radius: 0;
-  --tabs-tab-remove-radius: 0;
-  --thought-chain-item-radius: 0;
-  --thumbnail-radius: 0;
-  --time-picker-option-radius: 0;
-  --timeline-grid-event-radius: 0;
-  --tooltip-radius: 0;
-  --transfer-pane-radius: 0;
-  --transfer-row-radius: 0;
-  --tree-node-radius: 0;
-  --tree-select-row-radius: 0;
-  --upload-draft-radius: 0;
-  --upload-dropzone-radius: 0;
-  --upload-picture-badge-radius: 0;
-  --upload-picture-radius: 0;
-  --upload-row-radius: 0;
-  --upload-tile-radius: 0;
-  --welcome-radius: 0;
-
-  /* ── Elevation. Six foundation steps flattened; five component mirrors are `initial` knobs
-   *    since gh#880 and follow the steps at their own call site, so they need no line here. The
-   *    six below are still root-bound `var(--shadow-*)` and do not. ─────────────────────────── */
-  --shadow-xs: none;
-  --shadow-sm: none;
-  --shadow-md: none;
-  --shadow-lg: none;
-  --shadow-xl: none;
-  --shadow-2xl: none;
-
-  --app-launcher-launchpad-mark-shadow: none;
-  --card-hover-shadow: none;
-  --control-shadow: none;
-  --draggable-panel-shadow: none;
-  --float-button-shadow: none;
-  --mega-menu-panel-shadow: none;
-
-  /* ── Surfaces. Opaque, paper-white, separated by a line rather than by a shadow — which is what
-   *    "flat" means and also what removes every variable glassmorphism introduces. The border is
-   *    the ONLY separator left, so it is darker than the default hairline: at `0 0% 90%` a
-   *    shadowless Card has no edge at all against the canvas. ───────────────────────────────── */
-  --card-background: 0 0% 100%;
-  --card: 0 0% 100%;
-  --popover: 0 0% 100%;
-  --border: 220 13% 78%;
-  --input: 220 13% 72%;
-
-  /* ── Ink. One ramp, all of it above 7:1 on white — the flat surfaces give the text nothing to
-   *    hide behind, so "muted" here is a lighter WEIGHT at the same ratio, per
-   *    docs/GLASSMORPHISM-STANDARD.md §3, and not a lighter grey. ──────────────────────────── */
-  --foreground: 220 26% 12%;
-  --card-foreground: 220 26% 12%;
-  --popover-foreground: 220 26% 12%;
-  --muted-foreground: 220 16% 32%;
-  --text-tertiary: 220 14% 38%;
-
-  /* ── The one place the seed is allowed to paint a large area: the page canvas and the two
-   *    neutral fills, tinted a few percent towards `--primary` so the theme is visibly the seed's
-   *    and not a fixed grey. The `from` clause lives inside the token because these roles are
-   *    consumed as bare triplets — see the long note in `glassmorphism.css`; without relative
-   *    colour support the literals below stand. ───────────────────────────────────────────── */
-  --background: 220 20% 97%;
-  --muted: 220 16% 93%;
-  --accent: 220 16% 90%;
-  --secondary: 220 14% 92%;
-  /* ── The brand ink ramp. Every one of these is `:root`-bound in the library, so it resolves
-   *    against the ROOT seed and inherits that value into this scope no matter what `--primary`
-   *    says here. A token read inside `hsl()` takes a bare triplet; one read as a complete value
-   *    takes a whole `hsl(...)`; getting it backwards fails silently. ─────────────────────────── */
-  --text-link: 220 80% 34%;
-  --text-brand: 220 80% 34%;
-  --text-primary: 220 80% 30%;
-  --anchor-ink-color: 220 80% 34%;
-  --auth-shell-divider-label-color: 220 16% 32%;
-  --org-switcher-meta-foreground: 220 16% 32%;
-  --separator-label-color: 220 16% 32%;
-  --sidebar-item-active-foreground: hsl(220 80% 30%);
-  --sidebar-nav-icon-active-foreground: hsl(220 80% 30%);
-  --mega-menu-trigger-current-foreground: hsl(220 80% 30%);
-  --mega-menu-trigger-open-foreground: hsl(220 80% 30%);
-  --mega-menu-link-current-foreground: hsl(220 80% 30%);
-  --timeline-grid-event-muted-color: hsl(220 16% 32%);
-
-  /* ── INTERACTION STATES. The same sweep the glass theme documents, at the other polarity: this
-   *    canvas is light, so a hover is a slightly DARKER wash and the ring is a dark ink. §3 still
-   *    holds — the state is carried by the fill and the weight, never by lowering the ink's ratio.
-   *    The ring is 2px (§4b) and pinned OFF the brand: pinning it to `--ring`, which follows the
-   *    seed, is what makes a `#FFD400` tenant's focus indicator invisible on white. ─────────── */
-  --focus-ring-color: 220 80% 24%;
-  --focus-outline-color: 220 80% 24%;
-  --focus-ring-width: calc(2px * var(--focus-outline));
-  --control-outline: 220 80% 24%;
-  --focus-ring-glow-color: 220 80% 24%;
-  --topbar-item-hover-background: 220 16% 88%;
-  --topbar-item-hover-color: 220 26% 12%;
-  --segmented-item-hover-background: 220 16% 88%;
-  --segmented-item-hover-color: 220 26% 12%;
-  --segmented-item-active-background: 220 16% 84%;
-  --app-launcher-tile-hover-background: 220 16% 90%;
-  --app-launcher-tile-hover-color: 220 26% 12%;
-  --control-variant-filled-hover-background: 220 16% 88%;
-  --choice-button-selected-color: 220 26% 12%;
-  --choice-button-selected-border-color: 220 30% 40%;
-  --secondary-hover: 220 14% 86%;
-  --secondary-active: 220 14% 82%;
-
-  --region-focus-ring-color: hsl(220 80% 24%);
-  --menu-item-hover-background: hsl(220 16% 92%);
-  --menu-item-hover-foreground: hsl(220 26% 12%);
-  --table-row-hover-background: hsl(220 16% 94%);
-  --table-row-selected-background: hsl(220 20% 90%);
-  --tree-node-hover-background: hsl(220 16% 94%);
-  --tree-node-selected-background: hsl(220 20% 90%);
-  --tree-node-selected-foreground: hsl(220 26% 12%);
-  --mega-menu-trigger-hover-background: hsl(220 16% 92%);
-  --mega-menu-trigger-hover-foreground: hsl(220 26% 12%);
-  --mega-menu-link-hover-background: hsl(220 16% 92%);
-  --mega-menu-link-hover-foreground: hsl(220 26% 12%);
-  --sidebar-nav-item-hover-foreground: hsl(220 26% 12%);
-  --sidebar-nav-icon-hover-foreground: hsl(220 26% 12%);
-  --conversations-item-active-background: hsl(220 20% 90%);
-  --conversations-item-active-color: hsl(220 26% 12%);
-  --tabs-count-active-background: hsl(220 20% 86%);
-  --segmented-count-selected-background: hsl(220 20% 86%);
-  --tabs-count-active-color: hsl(220 26% 12%);
-  --segmented-count-selected-color: hsl(220 26% 12%);
-  --toggle-soft-hover-background: hsl(220 16% 90%);
-  --toggle-pressed-count-background: hsl(220 20% 84%);
-  --toggle-pressed-count-color: hsl(220 26% 12%);
-  --toggle-pressed-border-color: hsl(220 20% 50%);
-  --switch-unchecked-background: hsl(220 14% 74%);
-  --switch-content-unchecked-foreground: hsl(220 16% 28%);
-  --text-action-color: hsl(220 26% 16%);
-  --text-action-color-hover: hsl(220 26% 8%);
-
-  --app-shell-main-background: hsl(220 20% 97%);
-}
-
-@supports (color: hsl(from red h s l)) {
-  [data-theme-style="flat"] {
-    --background: from hsl(var(--primary)) h 20% 97%;
-    --muted: from hsl(var(--primary)) h 16% 93%;
-    --accent: from hsl(var(--primary)) h 16% 90%;
-    --secondary: from hsl(var(--primary)) h 14% 92%;
-    --border: from hsl(var(--primary)) h 13% 78%;
-    --app-shell-main-background: hsl(from hsl(var(--primary)) h 20% 97%);
-
-    /* Seed-tinted, and clamped in LIGHTNESS rather than copied: `--primary` itself is what fails
-     * as ink on a light canvas (1.07:1 for #FFD400), so the hue follows the seed and the lightness
-     * is fixed at a value that clears 4.5:1 on this theme's own surfaces.
-     *
-     * 26%/24%, AND THE NUMBER WAS MEASURED TWICE. At 34%/30% every seed cleared except citron,
-     * which still failed at 4.32:1 and 3.65:1 — because lightness is not luminance: at a fixed
-     * HSL lightness a yellow hue is far brighter than a blue one, so one clamp cannot serve the
-     * hue circle. Four points lower clears the worst hue with margin and only darkens the rest,
-     * which is the safe direction. A theme that wanted a tighter ramp would need per-hue
-     * lightness, which is `oklch`, and none of these roles is declared in it. */
-    --text-link: from hsl(var(--primary)) h 80% 26%;
-    --text-brand: from hsl(var(--primary)) h 80% 26%;
-    --text-primary: from hsl(var(--primary)) h 80% 30%;
-    --anchor-ink-color: from hsl(var(--primary)) h 80% 26%;
-    --sidebar-item-active-foreground: hsl(from hsl(var(--primary)) h 80% 24%);
-    --sidebar-nav-icon-active-foreground: hsl(from hsl(var(--primary)) h 80% 24%);
-    --mega-menu-trigger-current-foreground: hsl(from hsl(var(--primary)) h 80% 24%);
-    --mega-menu-trigger-open-foreground: hsl(from hsl(var(--primary)) h 80% 24%);
-    --mega-menu-link-current-foreground: hsl(from hsl(var(--primary)) h 80% 24%);
-  }
-}
-
-/**
- * ── FINDING 5 · gh#896 — flat was permanently light, and the cause is the same shape as the
- * `:root` freeze rule above but the opposite fault: not a value that never re-resolves, but a
- * value that never gets a CHANCE to. `[data-theme-style="flat"]` is a scope BELOW `:root`
- * (verified in Chromium: `HTML > BODY > DIV#root > DIV[data-theme-style]`), while the library's
- * own polarity switch — `.dark, :root[data-theme="dark"]` — is declared ON the root
- * (src/tokens/foundation.css:1024). A declaration on the element itself always wins over an
- * inherited one regardless of specificity, so every `--background`/`--card`/`--foreground` line
- * in the block above shadowed the ENTIRE dark branch: toggling `.dark` on `<html>` changed the
- * ink and fills the div would have inherited, but the div never consulted them because it had its
- * own value already. Measured before this block existed: 0/5 of the five core tokens moved.
- *
- * The fix mirrors the library's own selector pair exactly — `.dark [data-theme-style="flat"],
- * [data-theme="dark"] [data-theme-style="flat"]` — so it is the SAME div, matched by TWO
- * selectors of equal (0,2,0) specificity, each higher than the base rule's (0,1,0). Whichever one
- * matches wins on every property it restates; every property this block does NOT restate (the
- * 68-line radius family, the six `none` shadows) is untouched and keeps flowing from the base
- * rule above, because cascade specificity is resolved PER PROPERTY, not per rule — a polarity
- * switch does not need to re-declare "flat" a second time.
- *
- * ── WHY THE `--primary`-DERIVED BRAND INK IS NOT A SECOND FREEZE PROBLEM HERE ──────────────────
- * `docs/themes/index.ts`'s `ThemeRow.inkSurface` and `src/app/tenant-theme.ts` walk
- * `--text-link`/`--text-brand`/`--text-primary` to literal HSL and emit them as an INLINE style —
- * which outranks any external stylesheet rule on the SAME element, at any specificity. `flat`'s
- * own `inkSurface` is `null`, so that walk always targets the LIGHT default regardless of this
- * theme's polarity. Traced rather than assumed: the inline style lands on an ANCESTOR of this
- * div (not on it), because Finding 1b above already demonstrates the light block's own
- * `--text-link: 220 80% 34%` beats whatever `tenantTheme()` emits for citron/coral — a fact that
- * would be impossible if the inline style sat on this same element. So the same "declared on the
- * element beats inherited from a scope above" rule that CAUSED gh#896 is what already NEUTRALISES
- * the inline-style hazard for these six roles; restating them below is what closes the gap, same
- * as it already does for light. `inkSurface` remains a `base`/`glass` concern, not a `flat` one,
- * because flat sets these tokens directly on both polarities and never falls through to the
- * seed-walked default.
- *
- * ── VALUES: SOLVED AGAINST THE WORST NEUTRAL FILL, NOT GUESSED ──────────────────────────────────
- * Every ink token below was checked with the same sRGB relative-luminance formula
- * `measure-glass.mjs` uses, against all five neutral fills this file declares
- * (`--background` 9% / `--card` 13% / `--muted` 17% / `--secondary` 19% / `--accent` 22%,
- * hue 220 throughout) — `--accent` at 22% is the brightest of the five and so the worst case for
- * a light ink. Worst-case ratios: `--foreground` 10.58:1, `--muted-foreground` 5.21:1,
- * `--text-tertiary` 4.62:1, `--focus-ring-color` 5.71:1, brand ink 6.56–7.50:1 — all clear the
- * 4.5:1 text floor with margin. The two seed-tinted brand-ink lightnesses (80%/84%) were also
- * checked against all FIVE `SEEDS` from `docs/themes/index.ts` (violet/azure/coral/citron/navy —
- * their hue is what `hsl(from var(--primary)) h …` actually keeps): the worst combination, the
- * violet seed against `--accent`, is 5.73:1, still clear of 4.5:1. Boundary colours
- * (`--border` 52%, `--input` 58%, `--switch-unchecked-background` 54%) were solved the same way
- * against the SAME worst fill for the 3:1 non-text floor — `--border` lands at 3.05:1 against
- * `--accent`, its worst case, and every other pairing is higher.
- *
- * ── THE ONE PLACE THE MATRIX STAYS FLAT-CHARACTER RATHER THAN MIRRORING GLASS ───────────────────
- * No blur, no translucency, no shadow is introduced here — every fill below is a bare `H S% L%`
- * or `hsl(...)` triplet at full alpha, same constraint as the light block. A hover/active wash
- * that would be a slightly DARKER neutral on the light canvas is a slightly LIGHTER one here,
- * because that is what "the same visual weight, the opposite polarity" means; the ink family
- * never drops below its measured ratio to represent a lower-emphasis state (docs/
- * GLASSMORPHISM-STANDARD.md §3, restated here because it is a general rule, not a glass-only one).
- */
-.dark [data-theme-style="flat"],
-[data-theme="dark"] [data-theme-style="flat"] {
-  /* ── Surfaces. Opaque, ink-navy, separated by a line rather than a shadow — same flat rule as
-   *    light, inverted: the card is LIGHTER than the canvas instead of matching it, and the
-   *    border has to be LIGHTER than every surface it can sit against instead of darker. ──────── */
-  --card-background: 220 16% 13%;
-  --card: 220 16% 13%;
-  --popover: 220 16% 13%;
-  --border: 220 13% 52%;
-  --input: 220 13% 58%;
-
-  /* ── Ink. Same "weight carries the hierarchy, not the ratio" rule as the light block — the
-   *    darkest surface here is `--accent` at 22%, and every ink below still clears 4.5:1 against
-   *    it (see the docblock above). ─────────────────────────────────────────────────────────── */
-  --foreground: 220 20% 94%;
-  --card-foreground: 220 20% 94%;
-  --popover-foreground: 220 20% 94%;
-  --muted-foreground: 220 14% 68%;
-  --text-tertiary: 220 12% 64%;
-
-  /* ── The page canvas and the two neutral fills — darkest of the five, so `--accent` (not
-   *    `--background`) is the ink floor's worst case. ─────────────────────────────────────────── */
-  --background: 220 20% 9%;
-  --muted: 220 14% 17%;
-  --accent: 220 14% 22%;
-  --secondary: 220 13% 19%;
-
-  /* ── The brand ink ramp. Bare triplet, read inside `hsl()` at the call site, except the five
-   *    "active"/mega-menu roles which are consumed as a COMPLETE value and so are written as
-   *    `hsl(...)` — same split the light block documents at line 180 above. */
-  --text-link: 220 80% 80%;
-  --text-brand: 220 80% 80%;
-  --text-primary: 220 80% 84%;
-  --anchor-ink-color: 220 80% 80%;
-  --auth-shell-divider-label-color: 220 14% 68%;
-  --org-switcher-meta-foreground: 220 14% 68%;
-  --separator-label-color: 220 14% 68%;
-  --sidebar-item-active-foreground: hsl(220 80% 84%);
-  --sidebar-nav-icon-active-foreground: hsl(220 80% 84%);
-  --mega-menu-trigger-current-foreground: hsl(220 80% 84%);
-  --mega-menu-trigger-open-foreground: hsl(220 80% 84%);
-  --mega-menu-link-current-foreground: hsl(220 80% 84%);
-  --timeline-grid-event-muted-color: hsl(220 14% 68%);
-
-  /* ── INTERACTION STATES. The light block's hover wash is a darker neutral because that canvas
-   *    is light; here every hover/active fill is a LIGHTER wash instead, and the ring stays a
-   *    fixed dark-ink hue rather than following the seed, same reasoning as light: a citron/navy
-   *    seed's `--ring` would be unreadable, or invisible, against this canvas. ────────────────── */
-  --focus-ring-color: 220 80% 76%;
-  --focus-outline-color: 220 80% 76%;
-  --control-outline: 220 80% 76%;
-  --focus-ring-glow-color: 220 80% 76%;
-  --topbar-item-hover-background: 220 14% 22%;
-  --topbar-item-hover-color: 220 20% 94%;
-  --segmented-item-hover-background: 220 14% 22%;
-  --segmented-item-hover-color: 220 20% 94%;
-  --segmented-item-active-background: 220 14% 26%;
-  --app-launcher-tile-hover-background: 220 14% 24%;
-  --app-launcher-tile-hover-color: 220 20% 94%;
-  --control-variant-filled-hover-background: 220 14% 22%;
-  --choice-button-selected-color: 220 20% 94%;
-  --choice-button-selected-border-color: 220 30% 55%;
-  --secondary-hover: 220 13% 23%;
-  --secondary-active: 220 13% 27%;
-
-  --region-focus-ring-color: hsl(220 80% 76%);
-  --menu-item-hover-background: hsl(220 14% 24%);
-  --menu-item-hover-foreground: hsl(220 20% 94%);
-  --table-row-hover-background: hsl(220 14% 18%);
-  --table-row-selected-background: hsl(220 16% 22%);
-  --tree-node-hover-background: hsl(220 14% 18%);
-  --tree-node-selected-background: hsl(220 16% 22%);
-  --tree-node-selected-foreground: hsl(220 20% 94%);
-  --mega-menu-trigger-hover-background: hsl(220 14% 24%);
-  --mega-menu-trigger-hover-foreground: hsl(220 20% 94%);
-  --mega-menu-link-hover-background: hsl(220 14% 24%);
-  --mega-menu-link-hover-foreground: hsl(220 20% 94%);
-  --sidebar-nav-item-hover-foreground: hsl(220 20% 94%);
-  --sidebar-nav-icon-hover-foreground: hsl(220 20% 94%);
-  --conversations-item-active-background: hsl(220 16% 22%);
-  --conversations-item-active-color: hsl(220 20% 94%);
-  --tabs-count-active-background: hsl(220 16% 26%);
-  --segmented-count-selected-background: hsl(220 16% 26%);
-  --tabs-count-active-color: hsl(220 20% 94%);
-  --segmented-count-selected-color: hsl(220 20% 94%);
-  --toggle-soft-hover-background: hsl(220 14% 22%);
-  --toggle-pressed-count-background: hsl(220 16% 26%);
-  --toggle-pressed-count-color: hsl(220 20% 94%);
-  --toggle-pressed-border-color: hsl(220 20% 55%);
-  /* Track fill is a mid-tone (54%) so it reads as a distinct surface at 3:1+ against every
-   * neutral below it; the label riding on top needs to be dark, not light, to hold 4.5:1 against
-   * that same mid-tone — the one ink role in this block that goes DARK rather than light. */
-  --switch-unchecked-background: hsl(220 14% 54%);
-  --switch-content-unchecked-foreground: hsl(220 16% 10%);
-  --text-action-color: hsl(220 20% 90%);
-  --text-action-color-hover: hsl(220 20% 97%);
-
-  --app-shell-main-background: hsl(220 20% 9%);
-}
-
-@supports (color: hsl(from red h s l)) {
-  .dark [data-theme-style="flat"],
-  [data-theme="dark"] [data-theme-style="flat"] {
-    --background: from hsl(var(--primary)) h 20% 9%;
-    --muted: from hsl(var(--primary)) h 14% 17%;
-    --accent: from hsl(var(--primary)) h 14% 22%;
-    --secondary: from hsl(var(--primary)) h 13% 19%;
-    --border: from hsl(var(--primary)) h 13% 52%;
-    --app-shell-main-background: hsl(from hsl(var(--primary)) h 20% 9%);
-
-    /* Same lightness in both the static block above and here — unlike the light `@supports`
-     * branch, which had to drop four points to clear citron, checking all FIVE seeds at these
-     * numbers (see the docblock above) already clears the worst one (violet, 5.73:1 on
-     * `--accent`) with margin, so no further clamp is needed. */
-    --text-link: from hsl(var(--primary)) h 80% 80%;
-    --text-brand: from hsl(var(--primary)) h 80% 80%;
-    --text-primary: from hsl(var(--primary)) h 80% 84%;
-    --anchor-ink-color: from hsl(var(--primary)) h 80% 80%;
-    --sidebar-item-active-foreground: hsl(from hsl(var(--primary)) h 80% 84%);
-    --sidebar-nav-icon-active-foreground: hsl(from hsl(var(--primary)) h 80% 84%);
-    --mega-menu-trigger-current-foreground: hsl(from hsl(var(--primary)) h 80% 84%);
-    --mega-menu-trigger-open-foreground: hsl(from hsl(var(--primary)) h 80% 84%);
-    --mega-menu-link-current-foreground: hsl(from hsl(var(--primary)) h 80% 84%);
-  }
-}