:root {
	/* Surfaces — deep magenta-charcoal ramp (Nova). A near-black with a subtle
	   fuchsia undertone; reads as premium neutral-dark, not heavy purple. */
	--sa-bg: #120910;
	--sa-bg-2: #180C15;
	--sa-surface-1: #20111C;
	--sa-surface-2: #2A1725;
	--sa-border: rgba(255, 61, 174, .16);
	--sa-border-strong: rgba(255, 61, 174, .34);

	/* Brand / action — neon fuchsia with a violet lift (Nova). Token NAMES are
	   kept (the theme-side bridge + skin read them by name); only the values
	   change per style. Primary is the vivid fuchsia; violet lives in the
	   gradient/accents so the look pops without going too purple. */
	--sa-violet: #FF3DAE;
	--sa-violet-light: #FF7AC6;
	--sa-violet-deep: #C42E93;
	--sa-magenta: #C64BFF;
	--sa-pink: #FF6FB5;

	/* Signature gradient — violet → fuchsia → pink (neon lightstick). */
	--sa-gradient: linear-gradient(135deg, #A93BFF 0%, #FF3DAE 50%, #FF6FB5 100%);

	/* Text — cool off-white with a faint pink cast */
	--sa-text: #F7ECF4;
	--sa-text-muted: #C4A9BE;
	--sa-text-dim: #9C819A;

	/* Ink that sits ON a solid accent (vote button, chips, category pill). White
	   works on Nova's fuchsia; light-accent presets (Amber, Aurora) override it
	   to a dark ink so button labels stay legible. */
	--sa-on-accent: #ffffff;

	/* Keyboard focus ring — tracks each preset's bright pink automatically, so the
	   indicator stays on-brand across palettes. Paired with an inner ring the colour
	   of the page bg (see skin.css) so it reads on dark surfaces AND light gradient
	   buttons alike. WCAG 2.4.7 / 1.4.11. */
	--sa-focus: var(--sa-pink);

	/* Effects */
	--sa-glow: 0 0 40px rgba(255, 61, 174, .34);
	--sa-shadow-card: 0 8px 30px rgba(0, 0, 0, .45);
	--sa-radius: 16px;
	--sa-radius-sm: 12px;
	--sa-radius-pill: 999px;

	/* Per-vertical accents (category identity). Fixed hues drawn from the palette
	   library so each vertical reads distinct yet in-system; they stay constant
	   across style presets, like stable section colours. Used by the category
	   verticals feature (shining/verticals.php) via --vc-* on each card. */
	--sa-accent-kpop: #FF3DAE;    --sa-accent-kpop-2: #A93BFF;
	--sa-accent-kdrama: #FF3B6B;  --sa-accent-kdrama-2: #FF8FA8;
	--sa-accent-music: #16E5A6;   --sa-accent-music-2: #35C8FF;
	--sa-accent-variety: #3B82F6; --sa-accent-variety-2: #22D3EE;

	/* Voting / highlight accents — the "--sa-* contract" the theme-side bridge
	   (shining/assets/css/bridge.css) feeds into the read-only TotalPoll plugin's
	   --tp-* tokens. This file is the single source of truth for the palette.
	   NB: --sa-gold* keep their token name (the plugin's --tp-gold* map to them)
	   but are a vivid, NON-gold "power / highlight" accent — Shining Awards is a
	   fun fan-choice brand, deliberately not a gold award-gala look. In Nova it
	   is an electric cyan pop (complementary to fuchsia), not metallic gold. */
	--sa-indigo: #A93BFF;   /* secondary accent — violet (poll --tp-accent-2) */
	--sa-vote: #FF3DAE;     /* vote button base   (poll --tp-vote)     */
	--sa-vote-2: #FF74C0;   /* vote button sweep  (poll --tp-vote-2)   */
	--sa-gold: #3DE4FF;     /* highlight / 2x-power accent (poll --tp-gold)   */
	--sa-gold-2: #86EFFF;   /* highlight bright           (poll --tp-gold-2) */
	--sa-holo-1: #A93BFF;   /* holographic badge sweep (violet)        */
	--sa-holo-2: #FF3DAE;   /* holographic badge sweep (fuchsia)       */
	--sa-holo-3: #3DE4FF;   /* holographic badge sweep (cyan)          */

	/* Vote love-mark — a FIXED rose heart (deliberately NOT palette-driven, so
	   it stays the same warm love-red across every style preset). It stands for
	   "vote" everywhere the theme used to show the ✦ sparkle, and echoes the
	   heart TotalPoll uses on its own vote control. --sa-heart-mask is the same
	   heart path as shining_heart_svg(), for CSS ::before glyphs (mask-image). */
	--sa-heart: #FF345F;    /* solid rose heart (the vote love-mark)    */
	--sa-heart-2: #FF6F9C;  /* lighter rose (hover / secondary)        */
	--sa-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");

	/* Typography */
	--sa-font-display: "Clash Display", "Plus Jakarta Sans", system-ui, sans-serif;
	--sa-font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLE PRESETS. A "style" = one palette. The Customizer picker sets the html
   class `sa-style-{id}` (via the tie_html_class filter in style-switcher.php);
   :root above is the default "Nova" (neon fuchsia → violet). Because the whole
   theme skin AND the TotalPoll bridge (bridge.css) read these --sa-* tokens,
   switching the html class re-themes the theme + poll + profiles + leaderboard
   together. Override only palette tokens here — surfaces, brand, gradient, glow,
   accents. Presets keep white (or, for light accents, dark) ink legible on the
   vote button.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Style · Ember — warm coral → amber (the original default, now opt-in) ── */
html.sa-style-ember {
	--sa-bg: #14110E;
	--sa-bg-2: #1A150F;
	--sa-surface-1: #211B14;
	--sa-surface-2: #2A2219;
	--sa-border: rgba(255, 120, 80, .16);
	--sa-border-strong: rgba(255, 120, 80, .34);

	--sa-violet: #FF4E3D;
	--sa-violet-light: #FF8A6B;
	--sa-violet-deep: #C43A2E;
	--sa-magenta: #FF6A3D;
	--sa-pink: #FFB020;
	--sa-gradient: linear-gradient(135deg, #FF4E3D 0%, #FF6A3D 45%, #FFB020 100%);

	--sa-text: #F6EFE7;
	--sa-text-muted: #B7A896;
	--sa-text-dim: #93826E;

	--sa-glow: 0 0 40px rgba(255, 78, 61, .32);
	--sa-on-accent: #ffffff;

	--sa-accent-kpop: #FF4E3D;    --sa-accent-kpop-2: #FFB020;

	--sa-indigo: #F0894B;
	--sa-vote: #FF4E3D;
	--sa-vote-2: #FF7A3D;
	--sa-gold: #FFB020;
	--sa-gold-2: #FFC94D;
	--sa-holo-1: #FF6A3D;
	--sa-holo-2: #FF4E3D;
	--sa-holo-3: #FFB020;
}

/* ── Style 2 · Sunset — warm coral → hot pink, no purple ── */
html.sa-style-sunset {
	--sa-bg: #160B0C;
	--sa-bg-2: #1E0F10;
	--sa-surface-1: #271415;
	--sa-surface-2: #331A1B;
	--sa-border: rgba(255, 90, 120, .18);
	--sa-border-strong: rgba(255, 90, 120, .38);

	--sa-violet: #FF3B6B;
	--sa-violet-light: #FF8FA8;
	--sa-violet-deep: #C42648;
	--sa-magenta: #FF5C4A;
	--sa-pink: #FF9E45;
	--sa-gradient: linear-gradient(135deg, #FF9E45 0%, #FF5C4A 50%, #FF3B6B 100%);

	--sa-text: #FFF0EC;
	--sa-text-muted: #E0AEA6;
	--sa-text-dim: #C0938C;

	--sa-glow: 0 0 40px rgba(255, 59, 107, .34);
	--sa-on-accent: #ffffff;

	--sa-indigo: #FF5C4A;
	--sa-vote: #FF3B6B;
	--sa-vote-2: #FF5C4A;
	--sa-gold: #FF9E45;
	--sa-gold-2: #FFC178;
	--sa-holo-1: #FF9E45;
	--sa-holo-2: #FF5C4A;
	--sa-holo-3: #FF3B6B;
}

/* ── Style 3 · Cobalt — electric blue → cyan, tech-premium ── */
html.sa-style-cobalt {
	--sa-bg: #0A0D14;
	--sa-bg-2: #0E1220;
	--sa-surface-1: #111623;
	--sa-surface-2: #172033;
	--sa-border: rgba(59, 130, 246, .18);
	--sa-border-strong: rgba(59, 130, 246, .38);

	--sa-violet: #3B82F6;
	--sa-violet-light: #7CB0FF;
	--sa-violet-deep: #1E5FD0;
	--sa-magenta: #2FA6E8;
	--sa-pink: #22D3EE;
	--sa-gradient: linear-gradient(135deg, #3B82F6 0%, #2FA6E8 50%, #22D3EE 100%);

	--sa-text: #EAF0FF;
	--sa-text-muted: #96A6C6;
	--sa-text-dim: #7488AB;

	--sa-glow: 0 0 44px rgba(59, 130, 246, .34);
	--sa-on-accent: #ffffff;

	--sa-indigo: #22D3EE;
	--sa-vote: #3B82F6;
	--sa-vote-2: #22D3EE;
	--sa-gold: #22D3EE;
	--sa-gold-2: #67E8F9;
	--sa-holo-1: #22D3EE;
	--sa-holo-2: #3B82F6;
	--sa-holo-3: #7CB0FF;
}

/* ── Style 4 · Amber — honey → tangerine, warm glow (light accent, dark ink) ── */
html.sa-style-amber {
	--sa-bg: #14100A;
	--sa-bg-2: #1B140B;
	--sa-surface-1: #221A0F;
	--sa-surface-2: #2C2114;
	--sa-border: rgba(245, 158, 11, .18);
	--sa-border-strong: rgba(245, 158, 11, .38);

	--sa-violet: #F59E0B;
	--sa-violet-light: #FCD34D;
	--sa-violet-deep: #B45309;
	--sa-magenta: #FB923C;
	--sa-pink: #FFD34E;
	--sa-gradient: linear-gradient(135deg, #F59E0B 0%, #FB923C 50%, #FFD34E 100%);

	--sa-text: #FBF3E0;
	--sa-text-muted: #C9B891;
	--sa-text-dim: #A08C64;

	--sa-glow: 0 0 40px rgba(245, 158, 11, .34);
	--sa-on-accent: #2A1B02;

	--sa-indigo: #FB923C;
	--sa-vote: #F59E0B;
	--sa-vote-2: #FB923C;
	--sa-gold: #FFD34E;
	--sa-gold-2: #FFE7A3;
	--sa-holo-1: #FFD34E;
	--sa-holo-2: #FB923C;
	--sa-holo-3: #F59E0B;
}

/* ── Style 5 · Aurora — mint → aqua, fresh lightstick (light accent, dark ink) ── */
html.sa-style-aurora {
	--sa-bg: #08110D;
	--sa-bg-2: #0C1813;
	--sa-surface-1: #101E18;
	--sa-surface-2: #16271F;
	/* Neutral (cool-white) borders — the mint accent is too luminous to tint
	   borders with; at any alpha it reads as harsh green "lines" on cards, the
	   related element and the framed poll nominees. Keep the accent for text /
	   buttons / fills; borders stay neutral. */
	--sa-border: rgba(224, 255, 245, .10);
	--sa-border-strong: rgba(224, 255, 245, .22);

	--sa-violet: #16E5A6;
	--sa-violet-light: #7CF7D4;
	--sa-violet-deep: #0E9E76;
	--sa-magenta: #24D3B0;
	--sa-pink: #35C8FF;
	--sa-gradient: linear-gradient(135deg, #16E5A6 0%, #24D3B0 50%, #35C8FF 100%);

	--sa-text: #EAF7F1;
	--sa-text-muted: #93B7AC;
	--sa-text-dim: #6E9184;

	--sa-glow: 0 0 42px rgba(22, 229, 166, .32);
	--sa-on-accent: #04231A;

	--sa-indigo: #35C8FF;
	--sa-vote: #16E5A6;
	--sa-vote-2: #35C8FF;
	--sa-gold: #7CF7D4;
	--sa-gold-2: #B5FBE6;
	--sa-holo-1: #7CF7D4;
	--sa-holo-2: #35C8FF;
	--sa-holo-3: #16E5A6;
}