/* ==========================================================================
Sable — the default theme.
Dark-by-default, content-first, fluid product aesthetic. Palette authored in
OKLCH (locked hue per ramp, perceptually-even lightness, sRGB-capped chroma).
Light values live in :root; dark overrides in .dark.
Fonts: this theme EXPECTS the host app to provide "Figtree" (sans) and
"DM Mono" (mono). It declares the font stacks as --font-sans / --font-mono but
does not load the font files (load them via or @font-face in your app).
Components must reference the SEMANTIC tokens (--background, --primary,
--tone-1, …), never the palette steps below. See themes/_contract.ts.
========================================================================== */
:root,
[data-sable-theme="sable"] {
/* Chart series colours — a categorical palette validated for colour-blind
separation (adjacent pairs), a normal-vision floor, a lightness band and a
chroma floor against this theme's surfaces. Charts take them in order
(series 1 → --chart-1). Global defaults: every theme inherits them, and a
theme or preset may override the set — re-validate it if it does. */
--chart-1: oklch(57.53% 0.1626 255.53); /* #2a78d6 */
--chart-2: oklch(67.08% 0.1750 40.64); /* #eb6834 */
--chart-3: oklch(66.90% 0.1408 162.11); /* #1baf7a */
--chart-4: oklch(76.44% 0.1612 75.12); /* #eda100 */
--chart-5: oklch(71.63% 0.1412 357.39); /* #e87ba4 */
--chart-6: oklch(52.85% 0.1798 142.50); /* #008300 */
--chart-7: oklch(52.71% 0.1968 283.44); /* #6250d6 */
--chart-8: oklch(62.26% 0.1909 24.91); /* #e34948 */
/* Font stacks (theme-internal; host app provides the actual font files) */
--font-sans: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
/* Theme foundation vars consumed by styles.css. */
--theme-radius-none: 0px;
--theme-radius-xs: 4px;
--theme-radius-sm: 8px;
--theme-radius-md: 12px;
--theme-radius-lg: 16px;
--theme-radius-xl: 20px;
--theme-radius-full: 9999px;
/* Elevation, light. Layered: a tight contact shadow plus one or two soft drops
whose offsets roughly double per step. A single 5% blur read mushy and
barely separated a menu from the page (DESIGN.md → Elevation). */
--theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
/* A visible step above sm: sm and this differed by one 5% layer, which no
one could tell apart. */
--theme-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 3px 8px -2px rgb(0 0 0 / 0.08);
--theme-shadow-md: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 12px 24px -6px rgb(0 0 0 / 0.07);
--theme-shadow-lg: 0 2px 4px 0 rgb(0 0 0 / 0.04), 0 8px 16px -4px rgb(0 0 0 / 0.07), 0 24px 48px -12px rgb(0 0 0 / 0.11);
--theme-shadow-xl: 0 2px 4px 0 rgb(0 0 0 / 0.04), 0 12px 24px -6px rgb(0 0 0 / 0.08), 0 32px 64px -16px rgb(0 0 0 / 0.13);
/* Type-scale foundation vars consumed by styles.css's paired text-* utilities.
Values mirror styles.css's own fallback defaults exactly (zero visual
change) — declared explicitly here so the theme owns its type contract. */
--type-display-4xl-weight: 800;
--type-display-4xl-leading: 0.9;
--type-display-4xl-tracking: -0.05em;
--type-display-3xl-size: 6rem;
--type-display-3xl-weight: 700;
--type-display-3xl-leading: 0.95;
--type-display-3xl-tracking: -0.045em;
--type-display-2xl-size: 4.5rem;
--type-display-2xl-weight: 700;
--type-display-2xl-leading: 1;
--type-display-2xl-tracking: -0.04em;
--type-display-xl-size: 3.75rem;
--type-display-xl-weight: 700;
--type-display-xl-leading: 1.05;
--type-display-xl-tracking: -0.035em;
--type-display-lg-size: 3rem;
--type-display-lg-weight: 700;
--type-display-lg-leading: 1.1;
--type-display-lg-tracking: -0.03em;
--type-heading-weight: 600;
--type-heading-1-size: 2.25rem;
--type-heading-1-leading: 1.15;
--type-heading-1-tracking: -0.025em;
--type-heading-2-size: 1.75rem;
--type-heading-2-leading: 1.2;
--type-heading-2-tracking: -0.02em;
--type-heading-3-size: 1.375rem;
--type-heading-3-leading: 1.25;
--type-heading-3-tracking: -0.015em;
--type-heading-4-size: 1.125rem;
--type-heading-4-leading: 1.3;
--type-heading-4-tracking: -0.01em;
--type-title-weight: 600;
--type-title-leading: 1.4;
--type-title-tracking: -0.01em;
--type-title-sm-tracking: -0.005em;
/* Overline/eyebrow foundation vars consumed by styles.css's text-overline
utility. Values mirror styles.css's own fallback defaults exactly (zero
visual change) — declared explicitly so the theme owns its type contract. */
--type-overline-size: 0.75rem;
--type-overline-weight: 600;
--type-overline-leading: 1.2;
--type-overline-tracking: 0.08em;
--type-overline-transform: uppercase;
/* ----------------------------------------------------------------------
Palette ramps (OKLCH). 50 → 950. Theme-internal — never used directly
by components. Each 600 clears WCAG AA on white except flush-orange-600
(AA-Large only; use 700 for body text on white).
---------------------------------------------------------------------- */
/* Absolute white — deliberately OUTSIDE every ramp. Zinc tops out at zinc-50
(97.2% L, 0.002 C), a faint blue cast that is right for a raised surface and
wrong for the page itself, so white has no ramp step to come from. It lived
as a raw literal at five sites for that reason; naming it here is what lets
the semantic layer reference the palette everywhere with no exceptions.
Stays HEX rather than `oklch(100% 0 0)`: the two are the same colour, and at
the extremes there is nothing for OKLCH to buy. Perceptual notation earns its
keep on a ramp, where even lightness steps and a locked hue matter; #ffffff
is just unambiguous and shorter. Same for #000000. Every other colour token
in every theme is OKLCH — asserted in themes.test.ts, which exempts exactly
these two. */
--white: #ffffff;
/* Zinc — Hue 264° (cool neutral, near-zero chroma) */
--zinc-50: oklch(97.2% 0.002 264);
--zinc-100: oklch(94% 0.003 264);
--zinc-200: oklch(88% 0.004 264);
--zinc-300: oklch(79% 0.004 264);
--zinc-400: oklch(68% 0.004 264);
--zinc-500: oklch(58% 0.005 264);
--zinc-600: oklch(48% 0.005 264);
--zinc-700: oklch(39% 0.004 264);
--zinc-800: oklch(30% 0.004 264);
--zinc-850: oklch(27.5% 0.0035 264); /* dark popover: one visible step above the zinc-900 card */
--zinc-900: oklch(23% 0.003 264);
--zinc-950: oklch(15% 0.003 264);
/* Torch Red — Hue 22° (destructive). 600 darkened to 53% L for AA on white. */
--torch-red-50: oklch(97.2% 0.013 22);
--torch-red-100: oklch(94% 0.028 22);
--torch-red-200: oklch(88% 0.06 22);
--torch-red-300: oklch(79% 0.118 22);
--torch-red-400: oklch(68% 0.19 22);
--torch-red-500: oklch(60% 0.235 22);
--torch-red-600: oklch(53% 0.225 22);
--torch-red-700: oklch(45% 0.19 22);
--torch-red-800: oklch(36% 0.15 22);
--torch-red-900: oklch(28% 0.11 22);
--torch-red-950: oklch(18% 0.075 22);
/* Blue Gem — Hue 285° (collectible, violet-blue) */
--blue-gem-50: oklch(97.2% 0.014 285);
--blue-gem-100: oklch(94% 0.03 285);
--blue-gem-200: oklch(88% 0.065 285);
--blue-gem-300: oklch(79% 0.13 285);
--blue-gem-400: oklch(68% 0.205 285);
--blue-gem-500: oklch(58% 0.265 285);
--blue-gem-600: oklch(48% 0.265 285);
--blue-gem-700: oklch(40% 0.225 285);
--blue-gem-800: oklch(31% 0.18 285);
--blue-gem-900: oklch(23% 0.135 285);
--blue-gem-950: oklch(15% 0.09 285);
/* Purple Heart — Hue 309° (edition / brand accent, magenta-purple) */
--purple-heart-50: oklch(97.2% 0.014 309);
--purple-heart-100: oklch(94% 0.03 309);
--purple-heart-200: oklch(88% 0.065 309);
--purple-heart-300: oklch(79% 0.135 309);
--purple-heart-400: oklch(68% 0.215 309);
--purple-heart-500: oklch(60% 0.275 309);
--purple-heart-600: oklch(52% 0.275 309);
--purple-heart-700: oklch(43% 0.23 309);
--purple-heart-800: oklch(33% 0.18 309);
--purple-heart-900: oklch(24% 0.135 309);
--purple-heart-950: oklch(15% 0.09 309);
/* Caribbean Green — Hue 173° (standard / success, teal-green).
600 darkened to 45% L for AA on white. */
--caribbean-green-50: oklch(97.2% 0.018 173);
--caribbean-green-100: oklch(94% 0.035 173);
--caribbean-green-200: oklch(88% 0.07 173);
--caribbean-green-300: oklch(79% 0.115 173);
--caribbean-green-400: oklch(68% 0.14 173);
--caribbean-green-500: oklch(58% 0.135 173);
--caribbean-green-600: oklch(45% 0.118 173);
--caribbean-green-700: oklch(38% 0.1 173);
--caribbean-green-800: oklch(30% 0.08 173);
--caribbean-green-900: oklch(23% 0.06 173);
--caribbean-green-950: oklch(15% 0.04 173);
/* Flush Orange — Hue 52° (warning, amber-orange). Use 700 for body on white. */
--flush-orange-50: oklch(97.2% 0.018 52);
--flush-orange-100: oklch(94% 0.038 52);
--flush-orange-200: oklch(88% 0.075 52);
--flush-orange-300: oklch(79% 0.13 52);
--flush-orange-400: oklch(72% 0.17 52);
--flush-orange-500: oklch(68% 0.18 52);
--flush-orange-600: oklch(54% 0.155 52);
--flush-orange-700: oklch(45% 0.13 52);
--flush-orange-800: oklch(36% 0.105 52);
--flush-orange-900: oklch(28% 0.08 52);
--flush-orange-950: oklch(18% 0.055 52);
/* Azure Radiance — Hue 250° (info, sky-blue) */
--azure-radiance-50: oklch(97.2% 0.014 250);
--azure-radiance-100: oklch(94% 0.03 250);
--azure-radiance-200: oklch(88% 0.06 250);
--azure-radiance-300: oklch(79% 0.115 250);
--azure-radiance-400: oklch(68% 0.175 250);
--azure-radiance-500: oklch(60% 0.215 250);
--azure-radiance-600: oklch(52% 0.225 250);
--azure-radiance-700: oklch(43% 0.195 250);
--azure-radiance-800: oklch(34% 0.155 250);
--azure-radiance-900: oklch(25% 0.115 250);
--azure-radiance-950: oklch(16% 0.075 250);
/* Dark-tuned tone values (boosted chroma; activated via .dark below) */
--tone-1-dark: oklch(62% 0.295 318);
--tone-2-dark: oklch(72% 0.225 285);
--tone-3-dark: oklch(78% 0.205 168);
--tone-info-dark: oklch(76% 0.165 235);
--tone-warning-dark: oklch(82% 0.165 65);
/* A labelled fill: dropped to where white reads (4.8:1, Lc 72) rather than
lifted to where dark ink reads muddy (Lc 46). */
--highlight-dark: oklch(57% 0.28 318);
/* Status colours come in two: the fill carries a label (destructive sits low under white ink), and `-text` is the same colour drawn on a surface — text, borders, rings — kept light enough to read on a dark card. */
--destructive-dark: oklch(77.5% 0.129 25);
--destructive-fill-dark: oklch(59% 0.225 25);
/* Success twins the standard tone's dark value today (same caribbean-green),
but is a SEPARATE token a theme can retune independently of the post-type. */
--success-dark: oklch(78% 0.205 168);
/* ----------------------------------------------------------------------
Semantic tokens — light mode (the counterpart)
---------------------------------------------------------------------- */
--background: var(--white);
--foreground: var(--zinc-950);
--card: var(--white);
--card-foreground: var(--zinc-950);
--popover: var(--white);
--popover-foreground: var(--zinc-950);
--primary: var(--zinc-950);
--primary-foreground: var(--zinc-50);
--secondary: var(--zinc-100);
--secondary-foreground: var(--zinc-950);
--muted: var(--zinc-100);
--muted-foreground: var(--zinc-600);
--accent: var(--zinc-100);
--accent-foreground: var(--zinc-950);
--destructive: var(--torch-red-600);
--destructive-text: var(--torch-red-600);
--destructive-foreground: var(--white);
--success: var(--caribbean-green-600);
--success-text: var(--caribbean-green-600);
--success-foreground: var(--zinc-50);
--border: var(--zinc-200);
/* Stronger structural divider (grid lines, table rules) — a higher-contrast
step on the same neutral ramp as --border. */
--border-strong: var(--zinc-300);
--input: var(--zinc-200);
/* The resting edge of a control whose outline IS the control (checkbox, radio, an off switch track). Held to WCAG 1.4.11 3:1 on every surface, unlike the quieter --input field outline. */
--control-border: var(--zinc-500);
--ring: var(--zinc-500);
/* Tones — light (all clear WCAG AA on white) */
--tone-3: var(--caribbean-green-600);
--tone-2: var(--blue-gem-600);
--tone-1: var(--purple-heart-700);
--tone-warning: var(--flush-orange-700);
--tone-warning-text: var(--flush-orange-700);
--tone-info: var(--azure-radiance-600);
--tone-info-text: var(--azure-radiance-700); /* a step under the fill: 600 is 4.46:1 as text on muted */
--highlight: var(--purple-heart-700);
/* Tone ink — light mode the tone fills resolve to dark 600/700 steps, so the
legible ink on them is the light neutral. (Flips to dark ink under .dark.) */
--tone-3-foreground: var(--zinc-50);
--tone-2-foreground: var(--zinc-50);
--tone-1-foreground: var(--zinc-50);
--tone-warning-foreground: var(--zinc-50);
--tone-info-foreground: var(--zinc-50);
--highlight-foreground: var(--zinc-50);
/* Overlay — a fixed, theme-independent dark surface (subtly-tinted near-black,
never pure #000) for scrims, media letterbox, and pills on imagery, with a
light ink. Mode-independent: a scrim darkens content in both themes, so the
same value is repeated verbatim under .dark below (kept explicit so every
semantic token resolves within each mode block — see themes.test.ts). */
--overlay: var(--zinc-950);
--overlay-foreground: var(--zinc-50);
/* Sidebar — light */
--sidebar: var(--white);
--sidebar-foreground: var(--zinc-950);
--sidebar-primary: var(--zinc-950);
--sidebar-primary-foreground: var(--zinc-50);
--sidebar-accent: var(--zinc-100);
--sidebar-accent-foreground: var(--zinc-950);
--sidebar-border: var(--zinc-200);
--sidebar-ring: var(--zinc-500);
/* ----------------------------------------------------------------------
Layout tokens (mode-independent) — see DESIGN.md → Grid & layout.
Fluid-first: no global max-width; max-width is opt-in per region.
---------------------------------------------------------------------- */
/* --rhythm-unit and --grid-gutter are contract, not theme: they derive from
the baseline step in styles.css → Vertical rhythm. */
--grid-columns: 12;
/* Page margin (outer inset): 16px → 32px, fluid. */
--page-inset: clamp(16px, 4vw, 32px);
/* Content-width scale — opt-in per Region (`max="…"`), named by PURPOSE not
size. Cap text MEASURE (prose) separately from layout WIDTH. A page's width
is a Region; the 12-col grid is used WITHIN a region for multi-column content.
See DESIGN.md → Grid & layout. */
--measure-prose: 65ch; /* reading measure (~66 chars) — long-form text */
/* px, NEVER rem — a region cap is a layout measurement, not type.
These were declared in rem with the px values stated in these very
comments, and the comments were wrong in any app that retunes the root
font size. The docs app runs a 14px responsive root, so `56rem` rendered
784px while claiming 896px and `80rem` rendered 1120px while claiming
1280px — the default theme silently 12.5% under its own spec, in its own
primary consumer. Every generated theme already declares px; Sable was
the only one that did not, which is the worst possible one to get wrong.
The values below are DESIGN.md's table verbatim. */
--region-form: 480px; /* narrow single-col forms, auth, dialogs */
--region-feed: 640px; /* single-column timeline / reading feed */
--region-content: 896px; /* general content + settings/admin panes */
--region-wide: 1280px; /* dashboards, tables, multi-column grids */
--region-full: 1536px; /* full-bleed safety ceiling */
--region-ultrawide: 1800px; /* legacy — prefer --region-full */
--nav-height: 56px;
--sidebar-width: 256px;
--sidebar-width-collapsed: 64px;
/* Layering (z-index) moved to styles.css in 0.44.0 — it is contract, not
theme. A theme may override an individual step here; it must not be the
only place a step exists. See DESIGN.md → Layering. */
/* ----------------------------------------------------------------------
Motion tokens (mode-independent) — see DESIGN.md → Motion.
Quick, deliberate, skippable; no spring/overshoot in product UI.
Every duration is multiplied by --motion-scale, so one switch damps or
kills all token-driven motion: the global reduced-motion rule and the
toggle both set --motion-scale to 0 (see styles.css).
A duration of 0 makes transitions resolve instantly and infinite loaders
hold their first frame — i.e. motion becomes static, never broken.
---------------------------------------------------------------------- */
--motion-scale: 1;
/* Duration ladder — the 75/150/200/300/500 scale, scaled by --motion-scale. */
--motion-duration-instant: calc(75ms * var(--motion-scale));
--motion-duration-fast: calc(150ms * var(--motion-scale));
--motion-duration-base: calc(200ms * var(--motion-scale));
--motion-duration-slow: calc(300ms * var(--motion-scale));
--motion-duration-slower: calc(500ms * var(--motion-scale));
/* Semantic durations — entrances settle a touch longer than exits. */
--motion-duration-enter: var(--motion-duration-base);
--motion-duration-exit: var(--motion-duration-fast);
/* Easings — semantic names (Material-family curves).
standard ≈ ease-in-out — two-way moves, the general default.
decelerate ≈ ease-out — entrances (fast in, soft settle).
emphasized — strong settle for larger surfaces (dialogs, sheets, drawers).
linear — indeterminate loaders (spin/shimmer).
spring — a gentle single overshoot (~+4%); the default for delightful
pops (overlay open, control selection). Tasteful, not gaudy.
bounce — a stronger overshoot (~+10%); opt-in for playful accents
(success ticks, celebratory moments). Use sparingly.
Springs are applied on ENTER only; exits stay overshoot-free. */
--motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
--motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--motion-ease-spring: cubic-bezier(0.34, 1.35, 0.5, 1);
--motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--motion-ease-linear: linear;
}
/* ==========================================================================
Semantic tokens — dark mode (the brand default)
========================================================================== */
.dark,
.dark[data-sable-theme="sable"],
[data-sable-theme="sable"].dark,
/* A preset-scoped subtree inside a dark page follows the page into dark mode;
add `.light` to that subtree to pin it light. */
.dark [data-sable-theme="sable"]:not(.light) {
/* The same eight hues, stepped for the dark band (L 0.48–0.67, >= 3:1 on
the dark surfaces) and validated as a set — not a lightness flip. */
--chart-1: oklch(62.21% 0.1612 255.05); /* #3987e5 */
--chart-2: oklch(62.21% 0.1726 40.11); /* #d95926 */
--chart-3: oklch(62.12% 0.1283 163.11); /* #199e70 */
--chart-4: oklch(66.99% 0.1425 73.23); /* #c98500 */
--chart-5: oklch(62.24% 0.1712 0.84); /* #d55181 */
--chart-6: oklch(52.85% 0.1798 142.50); /* #008300 */
--chart-7: oklch(66.96% 0.1452 286.83); /* #9085e9 */
--chart-8: oklch(66.93% 0.1586 22.31); /* #e66767 */
/* Elevation, dark. A drop barely registers on near-black, so depth is the
surface step (popover above card) plus a faint top-edge highlight that
catches "light" on anything floating. Deeper drops than light mode, since
black on near-black needs more alpha to read at all. */
--theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--theme-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 4px 10px -2px rgb(0 0 0 / 0.4);
--theme-shadow-md: inset 0 1px 0 0 rgb(255 255 255 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 8px 20px -6px rgb(0 0 0 / 0.45);
--theme-shadow-lg: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 2px 4px 0 rgb(0 0 0 / 0.3), 0 20px 40px -12px rgb(0 0 0 / 0.55);
--theme-shadow-xl: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 2px 4px 0 rgb(0 0 0 / 0.3), 0 28px 56px -16px rgb(0 0 0 / 0.6);
--background: var(--zinc-950);
--foreground: var(--zinc-50);
--card: var(--zinc-900);
--card-foreground: var(--zinc-50);
--popover: var(--zinc-850);
--popover-foreground: var(--zinc-50);
--primary: var(--zinc-50);
--primary-foreground: var(--zinc-950);
--secondary: var(--zinc-800);
--secondary-foreground: var(--zinc-50);
--muted: var(--zinc-800);
--muted-foreground: var(--zinc-400);
--accent: var(--zinc-800);
--accent-foreground: var(--zinc-50);
--destructive: var(--destructive-fill-dark);
--destructive-text: var(--destructive-dark);
/* Dark destructive is two colours. The fill is a saturated red low enough for
white (4.6:1, Lc 75); dark ink on the old light-red fill passed the ratio but
read muddy (Lc 44). `text-destructive` and its borders and rings read
`--destructive-text`, the light, vibrant red that reads on the near-black
canvas. */
--destructive-foreground: var(--white);
/* Dark `--success` is a light, vibrant green that works as both fill and text,
so the legible ink flips to the dark neutral. */
--success: var(--success-dark);
--success-text: var(--success-dark);
--success-foreground: var(--zinc-950);
--border: oklch(from var(--zinc-700) l c h / 0.4);
--border-strong: oklch(from var(--zinc-500) l c h / 0.55);
--input: oklch(from var(--zinc-700) l c h / 0.4);
--control-border: var(--zinc-500);
--ring: var(--zinc-500);
/* Tones — dark-tuned (boosted chroma for vibrancy on the dark canvas) */
--tone-3: var(--tone-3-dark);
--tone-2: var(--tone-2-dark);
--tone-1: var(--tone-1-dark);
--tone-warning: var(--tone-warning-dark);
--tone-warning-text: var(--tone-warning-dark);
--tone-info: var(--tone-info-dark);
--tone-info-text: var(--tone-info-dark);
--highlight: var(--highlight-dark);
/* Tone ink — dark mode the tone fills resolve to lighter dark-tuned values,
so the legible ink flips to the dark neutral. (--overlay* repeat the :root
values verbatim — a dark scrim is the same in both modes.) */
--tone-3-foreground: var(--zinc-950);
--tone-2-foreground: var(--zinc-950);
--tone-1-foreground: var(--zinc-950);
--tone-warning-foreground: var(--zinc-950);
--tone-info-foreground: var(--zinc-950);
--highlight-foreground: var(--zinc-50);
--overlay: var(--zinc-950);
--overlay-foreground: var(--zinc-50);
/* Sidebar — dark */
--sidebar: var(--zinc-950);
--sidebar-foreground: var(--zinc-50);
--sidebar-primary: var(--zinc-50);
--sidebar-primary-foreground: var(--zinc-950);
--sidebar-accent: var(--zinc-800);
--sidebar-accent-foreground: var(--zinc-50);
/* zinc-800, not zinc-900: on the zinc-950 sidebar zinc-900 measured 1.16:1,
fainter than the page's own border. */
--sidebar-border: var(--zinc-800);
--sidebar-ring: var(--zinc-500);
}