/*
 * Playupi Theme: Light
 * A clean, bright theme with violet accents and soft shadows.
 *
 * To create a new theme, copy _template.css and fill in values.
 * See README.md in this folder for instructions.
 */
[data-theme="light"] {
  --theme-name: "Light";

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

  /* ── Accent Colors ── */
  --coral: #EF4444;
  --lime: #16A34A;
  --cyan: #0891B2;
  --amber: #D97706;

  /* ── Backgrounds (lightest → darkest) ── */
  --bg-base: #F8F8FC;
  --bg-surface-1: #FFFFFF;
  --bg-surface-2: #F1F1F6;
  --bg-surface-3: #E8E8F0;

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

  /* ── Text ── */
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-muted: #A1A1AA;
  --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.1) 0%, transparent 70%);
  --gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, transparent 50%);

  /* ── Shadows ── */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.1);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.15);

  /* ── Badges ── */
  --badge-new-bg: rgba(217, 119, 6, 0.1);
  --badge-new-text: #D97706;
  --badge-trendy-bg: rgba(239, 68, 68, 0.1);
  --badge-trendy-text: #EF4444;
  --badge-updated-bg: rgba(8, 145, 178, 0.1);
  --badge-updated-text: #0891B2;

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

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

  /* ── Overlays ── */
  --overlay: rgba(0, 0, 0, 0.3);
  --modal-bg: rgba(255, 255, 255, 0.9);

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

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