/*
 * Playupi Theme: Dark
 * A deep, gaming-focused dark theme with electric violet accents.
 *
 * To create a new theme, copy _template.css and fill in values.
 * See README.md in this folder for instructions.
 */
[data-theme="dark"] {
  --theme-name: "Dark";

  /* ── Primary Brand ── */
  --primary: #7C3AED;
  --primary-light: #A78BFA;
  --primary-dark: #5B21B6;
  --primary-surface: rgba(124, 58, 237, 0.1);

  /* ── Accent Colors ── */
  --coral: #FF6B6B;
  --lime: #84CC16;
  --cyan: #22D3EE;
  --amber: #F59E0B;

  /* ── Backgrounds (darkest → lightest) ── */
  --bg-base: #0A0A0F;
  --bg-surface-1: #13131A;
  --bg-surface-2: #1C1C27;
  --bg-surface-3: #262633;

  /* ── Borders ── */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);

  /* ── Text ── */
  --text-primary: #F4F4F5;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;
  --text-on-accent: #FFFFFF;

  /* ── Gradients ── */
  --gradient-brand: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.3) 0%, transparent 70%);
  --gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%);

  /* ── Shadows ── */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.3);

  /* ── Badges ── */
  --badge-new-bg: rgba(245, 158, 11, 0.15);
  --badge-new-text: #F59E0B;
  --badge-trendy-bg: rgba(255, 107, 107, 0.15);
  --badge-trendy-text: #FF6B6B;
  --badge-updated-bg: rgba(34, 211, 238, 0.15);
  --badge-updated-text: #22D3EE;

  /* ── Inputs ── */
  --input-bg: var(--bg-surface-2);
  --input-border: var(--border);
  --input-focus-ring: rgba(124, 58, 237, 0.2);
  --input-placeholder: var(--text-muted);

  /* ── Scrollbar ── */
  --scrollbar-track: var(--bg-surface-1);
  --scrollbar-thumb: var(--bg-surface-3);

  /* ── Overlays ── */
  --overlay: rgba(0, 0, 0, 0.6);
  --modal-bg: rgba(19, 19, 26, 0.85);

  /* ── Focus Ring ── */
  --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.2);

  /* ── Footer ── */
  --footer-bg: var(--bg-surface-1);
  --footer-border: var(--border);
}