/* ============================================================
   🎨 GP GLOBAL THEME SYSTEM
   Single source of truth for theme colors, shared by the main
   page AND every creator page. theme-global.js sets these same
   variables at runtime from localStorage, this file only makes
   sure the correct look is already in place before JS runs.
   ============================================================ */

:root {
  --primary:   #a200ff;
  --secondary: #d000ff;
  --tertiary:  #e0aaff;
  --bg-radial: #3d005c;
  --bg-dark:   #05000a;
  --glow: rgba(162, 0, 255, 0.35);
}

html[data-theme="cyber"] {
  --primary:   #00d9ff;
  --secondary: #00fff2;
  --tertiary:  #9dfcff;
  --bg-radial: #003d4d;
  --bg-dark:   #020c0f;
  --glow: rgba(0, 217, 255, 0.35);
}

html[data-theme="midnight"] {
  --primary:   #3b5bff;
  --secondary: #6ea8ff;
  --tertiary:  #b9d4ff;
  --bg-radial: #001233;
  --bg-dark:   #03060f;
  --glow: rgba(59, 91, 255, 0.35);
}

html[data-theme="crimson"] {
  --primary:   #ff2d6b;
  --secondary: #ff6f9c;
  --tertiary:  #ffc2d6;
  --bg-radial: #4d001a;
  --bg-dark:   #0a0004;
  --glow: rgba(255, 45, 107, 0.35);
}

html[data-theme="emerald"] {
  --primary:   #00e676;
  --secondary: #00c853;
  --tertiary:  #b9ffd6;
  --bg-radial: #00331a;
  --bg-dark:   #010a05;
  --glow: rgba(0, 230, 118, 0.35);
}

/* Smooth color transition whenever a theme swap happens */
body, .navbar, .card, .theme-menu, .gp-panel, .gp-modal {
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}