/* --- Design tokens: shape, type, surfaces, text ramp and the four palettes ---
   Shared by every Funbyte page (index, legal pages and play.html) so the whole
   site re-tints from one place. Set data-palette on <html> to switch.
   :root is the purple ("Violet") default so the site renders correctly even
   before the theme script runs. */
:root {
  /* Shape scale */
  --radius-xl: 20px;
  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-sm: 8px;

  /* Typography */
  --font-sans: 'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);

  /* Surfaces — near-black desaturated navy, cooled toward violet */
  --bg-color: #0b0918;
  --bg-surface-color: #130f26;
  --card-bg-color: #1a1533;
  --card-hover-bg-color: #251e47;
  --modal-bg-color: #1c1638;
  --input-bg-color: #1c1638;
  --nav-bg-color: rgba(11, 9, 24, 0.92);
  --nav-scrolled-bg: rgba(11, 9, 24, 0.98);
  --skeleton-color: #1c1638;
  --skeleton-shine: #251e47;

  /* Text ramp: primary → secondary → faint */
  --text-color: #f4f5fa;
  --text-color-muted: #a4a7bf;
  --text-color-faint: #6d7090;

  /* Accent — the site's long-standing violet */
  --accent-color: #8b5cff;
  --accent-hover-color: #a27dff;
  --accent-soft: rgba(139, 92, 255, 0.16);
  --accent-glow: rgba(139, 92, 255, 0.35);
  --accent-gold: #ffc23d;
  --on-accent-color: #ffffff;
  /* Accent used on top of dark hero artwork — light mode overrides this so the
     spotlight badge stays legible against the scrim. */
  --accent-on-art: var(--accent-color);

  /* Lines & depth */
  --border-color: rgba(255, 255, 255, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.45);
  --hover-tint: rgba(255, 255, 255, 0.05);

  /* Glassmorphism Tokens */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 12px;

  /* Spacing */
  --section-spacing: 60px;
  --container-padding: 40px;
}

/* --- Four full palettes ---------------------------------------------------
   Each palette shifts the accent *and* the whole surface ramp, so switching
   colour re-tints the entire page rather than only the buttons. */
:root[data-palette="orange"] {
  --bg-color: #0b0c13;
  --bg-surface-color: #12131d;
  --card-bg-color: #181926;
  --card-hover-bg-color: #222436;
  --modal-bg-color: #1b1c2b;
  --input-bg-color: #1b1c2b;
  --nav-bg-color: rgba(11, 12, 19, 0.92);
  --nav-scrolled-bg: rgba(11, 12, 19, 0.98);
  --skeleton-color: #1b1c2b;
  --skeleton-shine: #222436;
  --accent-color: #ff7a1a;
  --accent-hover-color: #ff9142;
  --accent-soft: rgba(255, 122, 26, 0.14);
  --accent-glow: rgba(255, 122, 26, 0.35);
  --on-accent-color: #ffffff;
}

:root[data-palette="cyan"] {
  --bg-color: #050a14;
  --bg-surface-color: #0a1322;
  --card-bg-color: #0e1a2e;
  --card-hover-bg-color: #15253f;
  --modal-bg-color: #0f1c30;
  --input-bg-color: #0f1c30;
  --nav-bg-color: rgba(5, 10, 20, 0.92);
  --nav-scrolled-bg: rgba(5, 10, 20, 0.98);
  --skeleton-color: #0f1c30;
  --skeleton-shine: #15253f;
  --accent-color: #00e0f0;
  --accent-hover-color: #4ae9f5;
  --accent-soft: rgba(0, 224, 240, 0.14);
  --accent-glow: rgba(0, 224, 240, 0.35);
  /* Cyan is a light accent, so filled controls need dark ink to stay legible */
  --on-accent-color: #04161c;
}

:root[data-palette="purple"] {
  --bg-color: #0b0918;
  --bg-surface-color: #130f26;
  --card-bg-color: #1a1533;
  --card-hover-bg-color: #251e47;
  --modal-bg-color: #1c1638;
  --input-bg-color: #1c1638;
  --nav-bg-color: rgba(11, 9, 24, 0.92);
  --nav-scrolled-bg: rgba(11, 9, 24, 0.98);
  --skeleton-color: #1c1638;
  --skeleton-shine: #251e47;
  --accent-color: #8b5cff;
  --accent-hover-color: #a27dff;
  --accent-soft: rgba(139, 92, 255, 0.16);
  --accent-glow: rgba(139, 92, 255, 0.35);
  --on-accent-color: #ffffff;
}

:root[data-palette="green"] {
  --bg-color: #07100c;
  --bg-surface-color: #0c1913;
  --card-bg-color: #10241a;
  --card-hover-bg-color: #163325;
  --modal-bg-color: #11261c;
  --input-bg-color: #11261c;
  --nav-bg-color: rgba(7, 16, 12, 0.92);
  --nav-scrolled-bg: rgba(7, 16, 12, 0.98);
  --skeleton-color: #11261c;
  --skeleton-shine: #163325;
  --accent-color: #1ed392;
  --accent-hover-color: #4ddfaa;
  --accent-soft: rgba(30, 211, 146, 0.14);
  --accent-glow: rgba(30, 211, 146, 0.35);
  --on-accent-color: #04150d;
}

/* --- Light mode ------------------------------------------------------------
   Light keeps a neutral surface ramp and tints it per palette. Accents are
   darkened here because the accent doubles as text colour on several controls. */
:root.light-theme {
  --bg-color: #f6f4fb;
  --bg-surface-color: #ffffff;
  --nav-bg-color: rgba(255, 255, 255, 0.85);
  --text-color: #191b23;
  --text-color-muted: #5b6376;
  --text-color-faint: #858d9e;
  --card-bg-color: #ffffff;
  --card-hover-bg-color: #f1f3f8;
  --modal-bg-color: #ffffff;
  --input-bg-color: #f1f3f8;
  --border-color: rgba(16, 20, 32, 0.1);
  --accent-color: #6636d6;
  --accent-hover-color: #552cb2;
  --accent-soft: rgba(102, 54, 214, 0.1);
  --accent-glow: rgba(102, 54, 214, 0.24);
  --on-accent-color: #ffffff;
  --skeleton-color: #e6eaf1;
  --skeleton-shine: #f4f6fa;
  --shadow-color: rgba(15, 23, 42, 0.12);
  --nav-scrolled-bg: rgba(255, 255, 255, 0.95);
  --hover-tint: rgba(15, 23, 42, 0.05);
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(0, 0, 0, 0.06);
  /* Matches the default palette; the per-palette blocks below override it. */
  --accent-on-art: #a27dff;
}

:root.light-theme[data-palette="orange"] {
  --bg-color: #f7f6f3;
  --accent-color: #c2560a;
  --accent-hover-color: #a8480a;
  --accent-soft: rgba(194, 86, 10, 0.1);
  --accent-glow: rgba(194, 86, 10, 0.24);
  --accent-on-art: #ff9142;
}

:root.light-theme[data-palette="cyan"] {
  --bg-color: #f2f7f9;
  --text-color: #04161c;
  --text-color-muted: #2c3a3e;
  --text-color-faint: #5a6b70;
  --border-color: rgba(0, 0, 0, 0.12);
  --accent-color: #05707d;
  --accent-hover-color: #045862;
  --accent-soft: rgba(5, 112, 125, 0.1);
  --accent-glow: rgba(5, 112, 125, 0.24);
  --accent-on-art: #4ae9f5;
}

:root.light-theme[data-palette="purple"] {
  --bg-color: #f6f4fb;
  --accent-color: #6636d6;
  --accent-hover-color: #552cb2;
  --accent-soft: rgba(102, 54, 214, 0.1);
  --accent-glow: rgba(102, 54, 214, 0.24);
  --accent-on-art: #a27dff;
}

:root.light-theme[data-palette="green"] {
  --bg-color: #f2f8f5;
  --accent-color: #0a7d53;
  --accent-hover-color: #086343;
  --accent-soft: rgba(10, 125, 83, 0.1);
  --accent-glow: rgba(10, 125, 83, 0.24);
  --accent-on-art: #4ddfaa;
}