/* =============================================================================
   surafel - theme token layer
   -----------------------------------------------------------------------------
   Loaded after every compiled stylesheet. Everything here is derived from
   --cl-primary-color (the accent picked in Display settings) so a single choice
   repaints the whole product.

   Sections
     1. Accent channel values per skin
     2. Aliases for legacy variables the compiled CSS references
     3. Derived accent ramp
     4. Surface / elevation / motion scale
     5. Background (light + dark) surface refinements
============================================================================= */

/* ---------------------------------------------------------------------------
   1. Accent channel values per skin

   color-mix() cannot feed rgba(), and a number of compiled rules use the
   rgba(var(--cl-primary-color-rgb), a) form. Each skin therefore publishes its
   accent as comma separated channels alongside the hex value.
--------------------------------------------------------------------------- */

body[data-skin="default"] { --cl-primary-color-rgb: 6, 122, 255; }
body[data-skin="green"]   { --cl-primary-color-rgb: 47, 191, 99; }
body[data-skin="yellow"]  { --cl-primary-color-rgb: 253, 173, 31; }
body[data-skin="pink"]    { --cl-primary-color-rgb: 224, 36, 94; }
body[data-skin="purple"]  { --cl-primary-color-rgb: 121, 75, 196; }
body[data-skin="orange"]  { --cl-primary-color-rgb: 244, 93, 34; }

/* Yellow needs dark glyphs to stay legible on an accent fill. */
body[data-skin="yellow"] { --sf-on-accent: #1a1400; }

/* ---------------------------------------------------------------------------
   2. Aliases for legacy variables

   --cl-main-color, --cl-link-color and --cl-primary-black-color are referenced
   in ~190 places across the premium, frames, gift and reel stylesheets but were
   never declared, so every one of them silently fell back to a hardcoded blue.
   Pointing them at the live accent is what makes those screens follow the theme.
--------------------------------------------------------------------------- */

body {
	--cl-main-color: var(--cl-primary-color, #067aff);
	--cl-link-color: var(--cl-primary-link-color, var(--cl-primary-color, #067aff));
	--cl-primary-black-color: var(--cl-primary-text-color, #14171a);
	--cl-primary-color-rgb: 6, 122, 255;
}

/* ---------------------------------------------------------------------------
   3. Derived accent ramp

   Named by intent rather than by lightness so component rules read clearly.
--------------------------------------------------------------------------- */

body {
	--sf-accent: var(--cl-primary-color, #067aff);
	--sf-on-accent: #ffffff;

	/* Interaction states */
	--sf-accent-hover: color-mix(in srgb, var(--sf-accent) 88%, #000000);
	--sf-accent-active: color-mix(in srgb, var(--sf-accent) 78%, #000000);
	--sf-accent-bright: color-mix(in srgb, var(--sf-accent) 88%, #ffffff);

	/* Tinted surfaces, from barely-there wash to solid chip */
	--sf-accent-wash: color-mix(in srgb, var(--sf-accent) 5%, var(--cl-primary-bg-color));
	--sf-accent-subtle: color-mix(in srgb, var(--sf-accent) 9%, var(--cl-primary-bg-color));
	--sf-accent-soft: color-mix(in srgb, var(--sf-accent) 14%, var(--cl-primary-bg-color));
	--sf-accent-muted: color-mix(in srgb, var(--sf-accent) 22%, var(--cl-primary-bg-color));

	/* Hairlines and outlines */
	--sf-accent-line: color-mix(in srgb, var(--sf-accent) 26%, var(--cl-primary-border-color));
	--sf-accent-line-strong: color-mix(in srgb, var(--sf-accent) 52%, var(--cl-primary-border-color));

	/* Focus ring + accent-tinted drop shadow */
	--sf-accent-ring: 0 0 0 3px color-mix(in srgb, var(--sf-accent) 26%, transparent);
	--sf-accent-glow: 0 6px 18px -6px color-mix(in srgb, var(--sf-accent) 55%, transparent);
	--sf-accent-glow-lg: 0 14px 34px -12px color-mix(in srgb, var(--sf-accent) 60%, transparent);

	/* Text on plain backgrounds - nudged for contrast on light surfaces */
	--sf-accent-text: var(--sf-accent);

	/* Decorative gradients used by heroes, empty states and badges */
	--sf-accent-gradient: linear-gradient(135deg,
		var(--sf-accent) 0%,
		color-mix(in srgb, var(--sf-accent) 72%, #7c3aed) 100%);
	--sf-accent-gradient-soft: linear-gradient(135deg,
		color-mix(in srgb, var(--sf-accent) 14%, var(--cl-primary-bg-color)) 0%,
		color-mix(in srgb, var(--sf-accent) 4%, var(--cl-primary-bg-color)) 100%);
}

/* ---------------------------------------------------------------------------
   4. Surface, elevation, radius, motion
--------------------------------------------------------------------------- */

body {
	/* Radii - a tighter, more deliberate scale than the stock 16/10/2 */
	--sf-radius-xs: 8px;
	--sf-radius-sm: 12px;
	--sf-radius-md: 16px;
	--sf-radius-lg: 20px;
	--sf-radius-xl: 28px;
	--sf-radius-pill: 999px;

	/* Spacing rhythm */
	--sf-space-1: 4px;
	--sf-space-2: 8px;
	--sf-space-3: 12px;
	--sf-space-4: 16px;
	--sf-space-5: 24px;
	--sf-space-6: 32px;
	--sf-space-7: 48px;

	/* Type scale */
	--sf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sf-text-xs: 12px;
	--sf-text-sm: 13px;
	--sf-text-base: 15px;
	--sf-text-lg: 17px;
	--sf-text-xl: 21px;
	--sf-text-2xl: 27px;
	--sf-text-3xl: 34px;
	--sf-text-4xl: 44px;

	/* Motion */
	--sf-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--sf-dur-fast: 120ms;
	--sf-dur: 200ms;
	--sf-dur-slow: 320ms;
}

/* ---------------------------------------------------------------------------
   5. Background-specific surfaces

   The stock palette only swapped a handful of values between light and dark.
   These add the layered surfaces, hairlines and shadows the component layer
   needs to read as depth rather than as boxes with borders.
--------------------------------------------------------------------------- */

body[data-bg="default"] {
	--sf-surface: #ffffff;
	--sf-surface-raised: #ffffff;
	--sf-surface-sunken: #f6f8fa;
	--sf-surface-inset: #eef1f5;

	--sf-hairline: rgba(15, 23, 42, 0.08);
	--sf-hairline-strong: rgba(15, 23, 42, 0.14);

	--sf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
	--sf-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--sf-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
	--sf-shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.14), 0 4px 10px -4px rgba(15, 23, 42, 0.07);
	--sf-shadow-xl: 0 28px 64px -16px rgba(15, 23, 42, 0.22), 0 8px 20px -8px rgba(15, 23, 42, 0.10);

	--sf-scrim: rgba(15, 23, 42, 0.42);
	--sf-skeleton: rgba(15, 23, 42, 0.06);
	--sf-skeleton-shine: rgba(255, 255, 255, 0.72);

	/* Slightly warmer text ramp than the stock near-black */
	--cl-primary-text-color: #0f172a;
	--cl-secondary-text-color: #64748b;
	--cl-tertiary-text-color: #475569;
	--cl-primary-border-color: #e6eaf0;
	--cl-secondary-border-color: #d8dfe8;
	--cl-secondary-bg-color: #f6f8fa;
	--cl-input-bg-color: #f1f4f8;
	--cl-event-hover-bg: #f2f5f9;
	--cl-modal-backdrop: rgba(15, 23, 42, 0.42);
}

body[data-bg="dark"] {
	--sf-surface: #0f141b;
	--sf-surface-raised: #161d26;
	--sf-surface-sunken: #0a0e14;
	--sf-surface-inset: #1c2531;

	--sf-hairline: rgba(255, 255, 255, 0.08);
	--sf-hairline-strong: rgba(255, 255, 255, 0.14);

	--sf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
	--sf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
	--sf-shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.55), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
	--sf-shadow-lg: 0 14px 32px -8px rgba(0, 0, 0, 0.65), 0 4px 12px -4px rgba(0, 0, 0, 0.45);
	--sf-shadow-xl: 0 30px 70px -16px rgba(0, 0, 0, 0.78), 0 10px 24px -8px rgba(0, 0, 0, 0.5);

	--sf-scrim: rgba(2, 6, 12, 0.72);
	--sf-skeleton: rgba(255, 255, 255, 0.06);
	--sf-skeleton-shine: rgba(255, 255, 255, 0.11);

	--cl-primary-bg-color: #0f141b;
	--cl-primary-bg-color-opacity: rgba(15, 20, 27, 0.86);
	--cl-secondary-bg-color: #161d26;
	--cl-primary-border-color: #253040;
	--cl-secondary-border-color: #1c2531;
	--cl-primary-text-color: #e8eef6;
	--cl-secondary-text-color: #8d9bad;
	--cl-tertiary-text-color: #a4b1c2;
	--cl-input-bg-color: #161d26;
	--cl-input-placeholder-color: rgba(141, 155, 173, 0.55);
	--cl-event-hover-bg: #1a222d;
	--cl-modal-backdrop: rgba(2, 6, 12, 0.72);

	/* Tinted surfaces mix toward the panel colour, not toward white. */
	--sf-accent-wash: color-mix(in srgb, var(--sf-accent) 8%, var(--cl-primary-bg-color));
	--sf-accent-subtle: color-mix(in srgb, var(--sf-accent) 13%, var(--cl-primary-bg-color));
	--sf-accent-soft: color-mix(in srgb, var(--sf-accent) 19%, var(--cl-primary-bg-color));
	--sf-accent-muted: color-mix(in srgb, var(--sf-accent) 28%, var(--cl-primary-bg-color));
	--sf-accent-bright: color-mix(in srgb, var(--sf-accent) 82%, #ffffff);
	--sf-accent-text: color-mix(in srgb, var(--sf-accent) 78%, #ffffff);
	--sf-accent-hover: color-mix(in srgb, var(--sf-accent) 88%, #ffffff);
	--sf-accent-active: color-mix(in srgb, var(--sf-accent) 76%, #ffffff);
}

/* Light mode: green, yellow and orange are too bright to read as text on white
   (yellow lands near 1.9:1). Only the failing skins are darkened, and only for
   text - accent fills keep the pure colour, so buttons stay vivid. */
body[data-bg="default"][data-skin="green"] { --sf-accent-text: #1a7a3f; }
body[data-bg="default"][data-skin="yellow"] { --sf-accent-text: #8f5d00; }
body[data-bg="default"][data-skin="orange"] { --sf-accent-text: #c2410c; }

/* Dark mode keeps the accent readable as body text on dark panels. */
body[data-bg="dark"][data-skin="default"] { --sf-accent-text: #5aa9ff; }
body[data-bg="dark"][data-skin="purple"] { --sf-accent-text: #a98ae0; }
body[data-bg="dark"][data-skin="pink"] { --sf-accent-text: #f0709b; }
body[data-bg="dark"][data-skin="orange"] { --sf-accent-text: #ff8b5e; }
body[data-bg="dark"][data-skin="green"] { --sf-accent-text: #5fd98c; }
body[data-bg="dark"][data-skin="yellow"] { --sf-accent-text: #fdc45c; }

/* Keep the media player chrome on the accent as well. */
body { --plyr-color-main: var(--sf-accent); }

@media (prefers-reduced-motion: reduce) {
	body {
		--sf-dur-fast: 0ms;
		--sf-dur: 0ms;
		--sf-dur-slow: 0ms;
	}
}