/*
 * VELYON Theme — Design Tokens (v2, finalized at M11)
 * Single source of truth for color, typography, and shape values.
 * Plugins should reference these variables (var(--velyon-*)) rather than
 * hardcoding their own colors/fonts. See Design Token Contract doc.
 *
 * v2 vs v1: values unchanged after Phase 2 live testing — no adjustment
 * needed. What DID change: --velyon-accent and --velyon-accent-deep are
 * now admin-overridable (Customize → Brand Color, see inc/customizer.php
 * + inc/enqueue.php's inline override). Every other token stays fixed by
 * design, on purpose — see the Brand Color section's own description for
 * why only the accent is exposed.
 *
 * Default (no data-theme attribute yet, or JS hasn't run) = dark, since
 * that is VELYON's brand default. From v1.7.0 the server prints the admin's
 * chosen default (Customize -> Default Theme Mode) on <html>, see
 * inc/theme-mode.php.
 */

:root,
html[data-theme="dark"] {
	--velyon-bg: #0B0D0F;
	--velyon-surface: #14171A;
	--velyon-surface-alt: #1B1F23;
	--velyon-text: #ECEDEE;
	--velyon-text-muted: #9AA0A6;
	--velyon-border: #262A2E;
	--velyon-accent: #00CE2D;
	--velyon-accent-deep: #00A824;
	--velyon-gold: #FFB800;
	--velyon-danger: #FF5C5C;

	/* v1.0.4 — added for plugin integration (Membership plugin review).
	   --velyon-on-accent: readable text/icon color to place ON TOP of
	   --velyon-accent (e.g. a primary button's label). Deliberately NOT
	   derived from --velyon-accent, because --velyon-accent is admin-
	   overridable (Brand Color) and a computed contrast color isn't
	   practical in plain CSS — this stays a safe, fixed near-black that
	   reads on any accent bright enough to serve as a brand color.
	   --velyon-success: a fixed semantic "success" color, independent of
	   --velyon-accent for the same reason: if an admin changes the brand
	   accent away from green, a success notice tied to --velyon-accent
	   would silently change meaning along with it. --velyon-gold stays
	   brand/decorative only (ratings, "featured" badges) and is NOT a
	   warning color — use --velyon-danger for errors and this for
	   success.
	   v1.1.3 — added --velyon-warning, requested by the Professional
	   LMS plugin for "heads up, not done yet, not an error" states
	   (a certificate under review, a not-yet-attempted assessment) —
	   exactly what --velyon-gold is documented above as NOT being for.
	   Independent of --velyon-accent for the same reason as success/
	   danger. */
	--velyon-on-accent: #05170A;
	--velyon-success: #00CE2D;
	--velyon-warning: #FFB020;

	--velyon-font-heading: 'Sora', sans-serif;
	--velyon-font-body: 'IBM Plex Sans', sans-serif;

	--velyon-radius-s: 8px;
	--velyon-radius-m: 14px;
	--velyon-radius-l: 22px;

	--velyon-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	--velyon-maxw: 1180px;
}

html[data-theme="light"] {
	--velyon-bg: #F6F9F6;
	--velyon-surface: #FFFFFF;
	--velyon-surface-alt: #EEF3EE;
	--velyon-text: #12151A;
	--velyon-text-muted: #5B636B;
	--velyon-border: #E1E6E2;
	--velyon-accent: #00CE2D;
	--velyon-accent-deep: #0FA338;
	--velyon-gold: #E0A200;
	--velyon-danger: #E5484D;
	--velyon-on-accent: #05170A;
	--velyon-success: #0FA338;
	--velyon-warning: #E0902A;

	--velyon-shadow: 0 8px 24px rgba(20, 40, 25, .10);
}

/* v1.7.0 — "Auto" default mode with no JavaScript.
   When Customize -> Default Theme Mode = Auto, the server prints
   data-theme-default="auto" on <html> but NO data-theme (it depends on the
   visitor's device). Until the boot script sets data-theme, a light-mode
   device would fall back to the dark :root values above — that was one source
   of the white -> dark -> white flash. This block is the pure-CSS answer.
   KEEP IN SYNC with the html[data-theme="light"] block above. */
@media (prefers-color-scheme: light) {
	html[data-theme-default="auto"]:not([data-theme]) {
		--velyon-bg: #F6F9F6;
		--velyon-surface: #FFFFFF;
		--velyon-surface-alt: #EEF3EE;
		--velyon-text: #12151A;
		--velyon-text-muted: #5B636B;
		--velyon-border: #E1E6E2;
		--velyon-accent: #00CE2D;
		--velyon-accent-deep: #0FA338;
		--velyon-gold: #E0A200;
		--velyon-danger: #E5484D;
		--velyon-on-accent: #05170A;
		--velyon-success: #0FA338;
		--velyon-warning: #E0902A;

		--velyon-shadow: 0 8px 24px rgba(20, 40, 25, .10);
	}
}

/* Respect a system-level request to reduce motion, regardless of theme. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}