/*
* Moonlit theme preset for Roxy UI. GENERATED by scripts/sync-themes.ts
* from src/styles/palettes.ts. Do not edit; change the palette data and
* rerun the codegen.
*
* It only reassigns --roxy-* tokens, so it composes with the core token
* contract instead of replacing it: link it AFTER the base tokens (or the
* CDN bundle that injects them) and every component on the page adopts the
* look. Light and dark blocks mirror the trigger structure of tokens.css
* exactly (OS preference, [data-theme] / .dark opt-in, and the explicit-
* light opt-out), all at :where() zero specificity so a per-page override
* still wins.
*
* Fonts are loaded below via one Google Fonts @import (both families are
* OFL, loaded from Google, never bundled here). To load them with markup
* instead, drop the @import line and add these to the page :
*
*
*
*
*
* To use the whole preset with one line instead of copying tokens, link
* the file:
*
*
*/
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..600&family=Jost:wght@400..600&display=swap");
/* Light defaults. Fonts, radius, and shadow do not vary by theme, so they are
* set once here and inherited by the dark blocks unchanged. */
:where(:root, :host) {
--roxy-font-sans:
"Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
--roxy-font-display:
"Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--roxy-radius-sm: 0.4375rem;
--roxy-radius-md: 0.875rem;
--roxy-radius-lg: 1.575rem;
--roxy-shadow-sm: none;
--roxy-shadow-md: none;
--roxy-shadow-lg: none;
--roxy-accent: #254b5a;
--roxy-accent-ink: color-mix(in oklab, var(--roxy-accent) 70%, black);
--roxy-ring: var(--roxy-accent);
/* Secondary ink (form labels, generic-renderer text, chart strokes): a warm tone between fg and muted so it stays stronger than help text. Without this override the stock slate leaks through and reads bluish on the warm palette. */
--roxy-secondary: #2d3c47;
--roxy-danger: #b23a38;
--roxy-bg: #faf6ec;
--roxy-surface: #f1eadb;
--roxy-fg: #14232e;
--roxy-muted: #5c6a76;
--roxy-border: #e4dbc6;
}
/* Dark theme via system preference. Mirrors tokens.css: only the theme-varying
* tokens are reassigned; accent-ink follows the accent (already legible on the
* dark surface) rather than mixing toward black. */
@media (prefers-color-scheme: dark) {
:where(:root, :host) {
--roxy-accent: #c9a96b;
--roxy-accent-ink: var(--roxy-accent);
--roxy-secondary: #ced0c7;
--roxy-danger: #e4736b;
--roxy-bg: #0b1826;
--roxy-surface: #1b2a39;
--roxy-fg: #efe7d3;
--roxy-muted: #92a4b2;
--roxy-border: #263a4c;
}
}
/* Light opt-out: beats the OS-dark block when the host explicitly chooses light. */
:where(
:root[data-theme="light"],
[data-theme="light"],
:root.light,
.light,
:host([data-theme="light"])
) {
--roxy-accent: #254b5a;
--roxy-accent-ink: color-mix(in oklab, var(--roxy-accent) 70%, black);
--roxy-secondary: #2d3c47;
--roxy-danger: #b23a38;
--roxy-bg: #faf6ec;
--roxy-surface: #f1eadb;
--roxy-fg: #14232e;
--roxy-muted: #5c6a76;
--roxy-border: #e4dbc6;
}
/* Dark theme via explicit opt-in ([data-theme=dark] or .dark on any ancestor). */
:where(
:root[data-theme="dark"],
[data-theme="dark"],
:root.dark,
.dark,
:host([data-theme="dark"])
) {
--roxy-accent: #c9a96b;
--roxy-accent-ink: var(--roxy-accent);
--roxy-secondary: #ced0c7;
--roxy-danger: #e4736b;
--roxy-bg: #0b1826;
--roxy-surface: #1b2a39;
--roxy-fg: #efe7d3;
--roxy-muted: #92a4b2;
--roxy-border: #263a4c;
}