/*
 * Celeste 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 and inside the
 * roxy.theme cascade layer, so a per-page override still wins and the
 * preset still outranks the token defaults whichever file loads first.
 *
 * Fonts are the system stack, so the preset loads no font file.
 *
 * To use the whole preset with one line instead of copying tokens, link
 * the file:
 *
 *   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/celeste.css">
 */

@layer roxy.tokens, roxy.theme;

@layer roxy.theme {
	/* 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:
			system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
			"Helvetica Neue", Arial, sans-serif;
		--roxy-font-display:
			system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
			"Helvetica Neue", Arial, sans-serif;

		--roxy-radius-sm: 0.125rem;
		--roxy-radius-md: 0.25rem;
		--roxy-radius-lg: 0.375rem;

		--roxy-shadow-sm: none;
		--roxy-shadow-md: none;
		--roxy-shadow-lg: none;

		--roxy-accent: #017272;
		--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): tuned per palette between fg and muted, so it stays stronger than help text. */
		--roxy-secondary: #282f35;
		--roxy-danger: #b23a38;

		--roxy-bg: #fcfcfc;
		--roxy-surface: #fcfcfc;
		--roxy-fg: #030303;
		--roxy-muted: #474e55;
		--roxy-border: #d4d8dd;
	}

	/* 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: #00bcbc;
			--roxy-accent-ink: var(--roxy-accent);
			--roxy-secondary: #c9ced4;
			--roxy-danger: #e4736b;

			--roxy-bg: #050a0f;
			--roxy-surface: #10171e;
			--roxy-fg: #f5f5f5;
			--roxy-muted: #a0a5ab;
			--roxy-border: #282f35;
		}
	}

	/* 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: #017272;
		--roxy-accent-ink: color-mix(in oklab, var(--roxy-accent) 70%, black);
		--roxy-secondary: #282f35;
		--roxy-danger: #b23a38;

		--roxy-bg: #fcfcfc;
		--roxy-surface: #fcfcfc;
		--roxy-fg: #030303;
		--roxy-muted: #474e55;
		--roxy-border: #d4d8dd;
	}

	/* 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: #00bcbc;
		--roxy-accent-ink: var(--roxy-accent);
		--roxy-secondary: #c9ced4;
		--roxy-danger: #e4736b;

		--roxy-bg: #050a0f;
		--roxy-surface: #10171e;
		--roxy-fg: #f5f5f5;
		--roxy-muted: #a0a5ab;
		--roxy-border: #282f35;
	}
}