/* ==============================================
   THEME-PURPLE - Purple/Pink accent scheme

   Vibrant, energetic gradients.
   Default theme for FC Components.
   Requires: palette.css, theme-core.css
   ============================================== */

:root {
  /* ═══════════════════════════════════════════
     ACCENT COLORS
     4 gradient stops from indigo to pink
     ═══════════════════════════════════════════ */
  --accent-1: var(--purple-1);
  --accent-2: var(--purple-2);
  --accent-3: var(--purple-3);
  --accent-4: var(--purple-4);

  /* Primary accent (for simple use cases) */
  --accent: var(--accent-2);
  --accent-hover: var(--accent-1);

  /* Accent line for borders */
  --line-accent: var(--accent-2);

  /* ═══════════════════════════════════════════
     GRADIENTS
     ═══════════════════════════════════════════ */

  /* Primary accent gradient (buttons, highlights) */
  --gradient-accent: linear-gradient(135deg, var(--accent-1), var(--accent-4));

  /* Subtle background gradient (headers, cards) */
  --gradient-subtle: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-base) 100%);

  /* Vertical subtle gradient (content areas) */
  --gradient-vertical: linear-gradient(180deg, var(--bg-surface) 0%, transparent 100%);

  /* Glow gradient (active states, selections) */
  --gradient-glow: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));

  /* Status bar gradient */
  --gradient-status: linear-gradient(90deg, var(--accent-1), var(--accent-2));

  /* ═══════════════════════════════════════════
     GLOWS & ACCENT SHADOWS
     ═══════════════════════════════════════════ */
  --glow-accent: rgba(139, 92, 246, 0.4);
  --shadow-glow: 0 8px 32px var(--glow-accent);
  --shadow-glow-sm: 0 4px 16px var(--glow-accent);

  /* ═══════════════════════════════════════════
     ACCENT OVERLAYS
     ═══════════════════════════════════════════ */
  --overlay-accent-5: rgba(139, 92, 246, 0.05);
  --overlay-accent-10: rgba(139, 92, 246, 0.1);
  --overlay-accent-20: rgba(139, 92, 246, 0.2);
  --overlay-accent-30: rgba(139, 92, 246, 0.3);

  /* ═══════════════════════════════════════════
     SELECTION & FOCUS
     ═══════════════════════════════════════════ */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-2);
  --selection-bg: var(--overlay-accent-20);
}