/*
* Practitioner theme preset for Roxy UI: a warm rosewater palette with a serif
* display font (Fraunces) over a humanist sans body (Jost), shadowless with
* hairline borders and generous radii. 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 of
* the @import, 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: #914955;
--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: #503a3a;
--roxy-danger: #b23a38;
--roxy-bg: #fbf6f3;
--roxy-surface: #f5e8e0;
--roxy-fg: #3e2a2c;
--roxy-muted: #7e625f;
--roxy-border: #ead9d2;
}
/* 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: #d9a2a6;
--roxy-accent-ink: var(--roxy-accent);
--roxy-secondary: #e0cecb;
--roxy-danger: #e4736b;
--roxy-bg: #231619;
--roxy-surface: #2e1e22;
--roxy-fg: #f2e4df;
--roxy-muted: #b39698;
--roxy-border: #402c31;
}
}
/* 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: #914955;
--roxy-accent-ink: color-mix(in oklab, var(--roxy-accent) 70%, black);
--roxy-secondary: #503a3a;
--roxy-danger: #b23a38;
--roxy-bg: #fbf6f3;
--roxy-surface: #f5e8e0;
--roxy-fg: #3e2a2c;
--roxy-muted: #7e625f;
--roxy-border: #ead9d2;
}
/* 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: #d9a2a6;
--roxy-accent-ink: var(--roxy-accent);
--roxy-secondary: #e0cecb;
--roxy-danger: #e4736b;
--roxy-bg: #231619;
--roxy-surface: #2e1e22;
--roxy-fg: #f2e4df;
--roxy-muted: #b39698;
--roxy-border: #402c31;
}