/**
 * Roxy UI design tokens. ~30 CSS custom properties that every component reads
 * via :host selector. Light + dark defaults. Host page overrides at :root or
 * per element. No Tailwind, no class-name overrides, no JS theme switcher.
 *
 * Light is the default. Dark applies under any of:
 *   - prefers-color-scheme: dark
 *   - [data-theme="dark"] on :root or any ancestor
 *   - .dark class on :root or any ancestor
 *
 * Motion gating:
 *   - --roxy-motion-duration defaults to 200ms. Set to 0ms to disable.
 *   - prefers-reduced-motion: reduce forces 0ms regardless of host overrides.
 */

:root,
:host {
	/* Color: brand */
	--roxy-primary: #0f172a;
	--roxy-secondary: #475569;
	--roxy-accent: #f59e0b;
	/* Text-safe accent variant. amber-500 hits 2.14:1 on white which fails
	 * WCAG AA for body text. amber-700 hits 4.5:1, used wherever the accent
	 * tone is applied to text. Fills (planet glyphs, chart accents, badges
	 * with non-text use) keep --roxy-accent. */
	--roxy-accent-fg: #b45309;

	/* Color: status. The base value (success, warning, danger, info) is for
	 * fills and tints. The -fg variant is darker so text on a light tint passes
	 * WCAG AA (>= 4.5:1 on white). Use -fg whenever status color hits text. */
	--roxy-success: #16a34a;
	--roxy-success-fg: #166534;
	--roxy-warning: #ea580c;
	--roxy-warning-fg: #9a3412;
	--roxy-danger: #dc2626;
	--roxy-danger-fg: #991b1b;
	--roxy-info: #0284c7;
	--roxy-info-fg: #075985;

	/* Color: surface */
	--roxy-bg: #ffffff;
	--roxy-fg: #0a0a0a;
	--roxy-muted: #71717a;
	--roxy-border: #e4e4e7;
	--roxy-ring: rgba(245, 158, 11, 0.4);

	/* Typography */
	--roxy-font-sans:
		"Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	--roxy-font-mono:
		"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono",
		monospace;

	--roxy-text-xs: 0.75rem;
	--roxy-text-sm: 0.875rem;
	--roxy-text-base: 1rem;
	--roxy-text-lg: 1.125rem;
	--roxy-text-xl: 1.5rem;

	--roxy-weight-normal: 400;
	--roxy-weight-bold: 600;

	--roxy-leading-tight: 1.2;
	--roxy-leading-normal: 1.5;

	--roxy-tracking-tight: -0.02em;
	--roxy-tracking-normal: 0em;

	/* Spacing */
	--roxy-space-xs: 0.25rem;
	--roxy-space-sm: 0.5rem;
	--roxy-space-md: 1rem;
	--roxy-space-lg: 1.5rem;
	--roxy-space-xl: 2.5rem;

	/* Radius */
	--roxy-radius-sm: 4px;
	--roxy-radius-md: 8px;
	--roxy-radius-lg: 12px;
	--roxy-radius-full: 9999px;

	/* Shadow */
	--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--roxy-shadow-md:
		0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.14);

	/* Motion */
	--roxy-motion-duration: 200ms;
	--roxy-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);

	/* Heat scale: 7-step gradient used by ashtakavarga bindu cells.
	 * Low bindus (1) are cool green; high bindus (7+) are hot red. */
	--roxy-heat-1: #f0fdf4;
	--roxy-heat-2: #d1fae5;
	--roxy-heat-3: #a7f3d0;
	--roxy-heat-4: #fde68a;
	--roxy-heat-5: #fdba74;
	--roxy-heat-6: #fb923c;
	--roxy-heat-7: #ef4444;
}

/* Dark theme via system preference */
@media (prefers-color-scheme: dark) {
	:root,
	:host {
		--roxy-primary: #f8fafc;
		--roxy-secondary: #94a3b8;
		--roxy-accent: #fbbf24;
		--roxy-accent-fg: #fbbf24;

		/* Status -fg overrides must mirror the explicit [data-theme="dark"] block
		 * below. Without these, a user on system dark with no data-theme attribute
		 * inherits the light-mode -fg values (e.g. #166534 success) which renders
		 * as near-invisible dark green on a near-black surface and fails WCAG AA. */
		--roxy-success: #22c55e;
		--roxy-success-fg: #86efac;
		--roxy-warning: #fb923c;
		--roxy-warning-fg: #fdba74;
		--roxy-danger: #ef4444;
		--roxy-danger-fg: #fca5a5;
		--roxy-info: #38bdf8;
		--roxy-info-fg: #7dd3fc;

		--roxy-bg: #0a0a0a;
		--roxy-fg: #fafafa;
		--roxy-muted: #a1a1aa;
		--roxy-border: #27272a;
		--roxy-ring: rgba(251, 191, 36, 0.45);

		--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
		--roxy-shadow-md:
			0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
		--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);

		--roxy-heat-1: #052e16;
		--roxy-heat-2: #14532d;
		--roxy-heat-3: #166534;
		--roxy-heat-4: #92400e;
		--roxy-heat-5: #b45309;
		--roxy-heat-6: #c2410c;
		--roxy-heat-7: #b91c1c;
	}
}

/* Light theme override. Beats the @media (prefers-color-scheme: dark) block
 * when the host explicitly opts back into light. Without this, a dark-mode OS
 * pins the tokens to dark even after data-theme="light" is set. */
:root[data-theme="light"],
:host([data-theme="light"]),
.light :host {
	--roxy-primary: #0f172a;
	--roxy-secondary: #475569;
	--roxy-accent: #f59e0b;
	--roxy-accent-fg: #b45309;

	--roxy-success: #16a34a;
	--roxy-warning: #ea580c;
	--roxy-danger: #dc2626;
	--roxy-info: #0284c7;

	--roxy-bg: #ffffff;
	--roxy-fg: #0a0a0a;
	--roxy-muted: #71717a;
	--roxy-border: #e4e4e7;
	--roxy-ring: rgba(245, 158, 11, 0.4);

	--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--roxy-shadow-md:
		0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.14);
}

/* Dark theme via host opt-in */
:root[data-theme="dark"],
:host([data-theme="dark"]),
.dark :host {
	--roxy-primary: #f8fafc;
	--roxy-secondary: #94a3b8;
	--roxy-accent: #fbbf24;
	--roxy-accent-fg: #fbbf24;

	--roxy-success: #22c55e;
	--roxy-success-fg: #86efac;
	--roxy-warning: #fb923c;
	--roxy-warning-fg: #fdba74;
	--roxy-danger: #ef4444;
	--roxy-danger-fg: #fca5a5;
	--roxy-info: #38bdf8;
	--roxy-info-fg: #7dd3fc;

	--roxy-bg: #0a0a0a;
	--roxy-fg: #fafafa;
	--roxy-muted: #a1a1aa;
	--roxy-border: #27272a;
	--roxy-ring: rgba(251, 191, 36, 0.45);

	--roxy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--roxy-shadow-md:
		0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);

	--roxy-heat-1: #052e16;
	--roxy-heat-2: #14532d;
	--roxy-heat-3: #166534;
	--roxy-heat-4: #92400e;
	--roxy-heat-5: #b45309;
	--roxy-heat-6: #c2410c;
	--roxy-heat-7: #b91c1c;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
	:root,
	:host {
		--roxy-motion-duration: 0ms;
	}
}