/**
 * Arcade Theme - Playful Arcade
 * Deep purple gradients with candy-colored accents
 * Vibrant colors: coral pink, teal, warm yellow, bright blue
 */

html[data-theme="arcade"] {
  /* ========================================
     BRAND COLORS - Coral Pink Primary
     ======================================== */
  --theme-brand-primary: #FF4D6D;
  --theme-brand-primary-hover: #FF6B88;
  --theme-brand-accent: #E63E5C;
  --theme-brand-primary-contrast: #FFFFFF;

  /* ========================================
     BACKGROUNDS - Deep Purple
     ======================================== */
  --theme-bg-primary: #1B0B3A;
  --theme-bg-secondary: #2A0F5F;
  --theme-surface-base: rgba(59, 26, 122, 0.8);
  --theme-surface-raised: rgba(75, 35, 140, 0.5);
  --theme-surface-elevated: rgba(90, 45, 160, 0.9);
  --dropdown-bg: #3b1a7a;

  /* ========================================
     TEXT - Lavender Whites
     ======================================== */
  --theme-text-primary: #FFFFFF;
  --theme-text-secondary: #EDE7FF;
  --theme-text-tertiary: #B8A7E6;
  --theme-text-muted: #8B7EB3;

  /* RGB values for alpha compositing */
  --theme-text-primary-rgb: 255 255 255;

  /* ========================================
     BORDERS
     ======================================== */
  --theme-border-base: rgba(139, 126, 179, 0.3);
  --theme-border-subtle: rgba(139, 126, 179, 0.15);
  --theme-border-accent: rgba(255, 77, 109, 0.4);

  /* ========================================
     SEMANTIC COLORS
     ======================================== */
  /* Success - Teal */
  --theme-semantic-success: #06D6A0;
  --theme-semantic-success-hover: #05C793;

  /* Warning - Warm Yellow */
  --theme-semantic-warning: #FFD166;
  --theme-semantic-warning-hover: #FFCA4D;

  /* Error - Coral (matches brand) */
  --theme-semantic-error: #FF4D6D;
  --theme-semantic-error-hover: #E63E5C;

  /* Info - Bright Blue */
  --theme-semantic-info: #4D96FF;
  --theme-semantic-info-hover: #3D86EF;

  /* ========================================
     CASINO SPECIAL COLORS
     ======================================== */
  /* Gold/Jackpot - Warm Yellow */
  --theme-special-gold: #FFD166;
  --theme-special-gold-light: #FFE299;
  --theme-special-gold-dark: #E6BC5C;

  /* VIP - Rich Purple */
  --theme-special-vip: #9D4EDD;
  --theme-special-vip-dark: #7B2CBF;

  /* Cash Balance - Teal */
  --theme-special-cash: #06D6A0;
  --theme-special-cash-dark: #05B88A;

  /* Bonus Balance - Warm Yellow */
  --theme-special-bonus: #FFD166;
  --theme-special-bonus-dark: #E6BC5C;

  /* ========================================
     INTERACTIVE STATES
     ======================================== */
  --theme-hover-overlay: rgba(255, 77, 109, 0.08);
  --theme-active-overlay: rgba(255, 77, 109, 0.15);
  --theme-focus-ring: rgba(255, 77, 109, 0.5);

  /* ========================================
     SHADOWS
     ======================================== */
  --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --theme-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);

  /* Arcade Glow - Coral + Purple dual glow */
  --theme-shadow-glow: 0 0 20px rgba(255, 77, 109, 0.4), 0 0 40px rgba(157, 78, 221, 0.2);

  /* ========================================
     CARD VARIANTS (Semantic Token Overrides)
     ======================================== */
  /* Success Card */
  --card-success-bg-from: rgba(6, 214, 160, 0.15);
  --card-success-bg-to: rgba(6, 214, 160, 0.08);
  --card-success-border: rgba(6, 214, 160, 0.3);
  --card-success-icon-bg: rgba(6, 214, 160, 0.2);
  --card-success-hover-glow: rgba(6, 214, 160, 0.25);

  /* Warning Card */
  --card-warning-bg-from: rgba(255, 209, 102, 0.15);
  --card-warning-bg-to: rgba(255, 209, 102, 0.08);
  --card-warning-border: rgba(255, 209, 102, 0.3);
  --card-warning-icon-bg: rgba(255, 209, 102, 0.2);
  --card-warning-hover-glow: rgba(255, 209, 102, 0.25);

  /* Info Card */
  --card-info-bg-from: rgba(77, 150, 255, 0.15);
  --card-info-bg-to: rgba(77, 150, 255, 0.08);
  --card-info-border: rgba(77, 150, 255, 0.3);
  --card-info-icon-bg: rgba(77, 150, 255, 0.2);
  --card-info-hover-glow: rgba(77, 150, 255, 0.25);

  /* Primary Card */
  --card-primary-bg-from: rgba(255, 77, 109, 0.15);
  --card-primary-bg-to: rgba(255, 77, 109, 0.08);
  --card-primary-border: rgba(255, 77, 109, 0.3);
  --card-primary-icon-bg: rgba(255, 77, 109, 0.2);
  --card-primary-hover-glow: rgba(255, 77, 109, 0.25);

  /* ========================================
     BADGE VARIANTS
     ======================================== */
  --badge-orange-bg: var(--theme-brand-primary);
  --badge-orange-text: #ffffff;

  --badge-gold-bg: var(--theme-special-gold);
  --badge-gold-text: #1B0B3A;

  --badge-vip-bg: var(--theme-special-vip);
  --badge-vip-text: #ffffff;

  /* ========================================
     BUTTON SEMANTIC COLORS
     ======================================== */
  --button-primary-bg: var(--theme-brand-primary);
  --button-primary-hover: var(--theme-brand-primary-hover);
  --button-primary-text: #ffffff;

  --button-success-bg: var(--theme-semantic-success);
  --button-success-hover: var(--theme-semantic-success-hover);
  --button-success-text: #1B0B3A;

  --button-warning-bg: var(--theme-semantic-warning);
  --button-warning-hover: var(--theme-semantic-warning-hover);
  --button-warning-text: #1B0B3A;

  --button-error-bg: var(--theme-semantic-error);
  --button-error-hover: var(--theme-semantic-error-hover);
  --button-error-text: #ffffff;

  --button-secondary-bg: var(--theme-surface-elevated);
  --button-secondary-hover: var(--theme-surface-raised);
  --button-secondary-text: var(--theme-text-primary);

  --button-primary-pressed: var(--theme-brand-accent);
  --button-secondary-pressed: rgba(65, 35, 120, 0.6);
  --button-success-pressed: #04C18B;
  --button-error-pressed: #D33550;
  --button-disabled-opacity: 0.55;

  /* ========================================
     INPUT FIELDS
     ======================================== */
  --input-bg: var(--theme-surface-raised);
  --input-border: var(--theme-border-base);
  --input-border-focus: var(--theme-brand-primary);
  --input-text: var(--theme-text-primary);
  --input-placeholder: var(--theme-text-muted);

  /* ========================================
     MODAL & OVERLAY
     ======================================== */
  --modal-bg: var(--theme-surface-base);
  --modal-border: var(--theme-border-base);
  --modal-overlay: rgba(27, 11, 58, 0.85);
  --modal-header-bg: var(--theme-surface-elevated);

  /* ========================================
     NAVIGATION
     ======================================== */
  --nav-bg: var(--theme-surface-base);
  --nav-border: var(--theme-border-base);
  --nav-item-hover: var(--theme-hover-overlay);
  --nav-item-active: var(--theme-brand-primary);
  --nav-item-text: var(--theme-text-secondary);
  --nav-item-text-active: var(--theme-brand-primary);

  /* ========================================
     PROGRESS & METERS
     ======================================== */
  --progress-bg: var(--theme-surface-raised);
  --progress-fill-success: var(--theme-semantic-success);
  --progress-fill-warning: var(--theme-semantic-warning);
  --progress-fill-primary: var(--theme-brand-primary);

  /* ========================================
     CASINO-SPECIFIC
     ======================================== */
  --balance-cash-color: var(--theme-special-cash);
  --balance-bonus-color: var(--theme-special-bonus);
  --balance-total-color: var(--theme-text-primary);

  --game-jackpot-color: var(--theme-special-gold);
  --game-hot-color: var(--theme-semantic-error);
  --game-new-color: var(--theme-semantic-info);
  --game-card-gradient-overlay: linear-gradient(
    rgba(0, 0, 0, 0) 14.29%,
    rgba(35, 36, 54, 0.96) 69.33%,
    #191a27
  );
  --game-card-hover-overlay-bg: rgba(17, 18, 30, 0.8);
  --game-card-provider-text: rgba(255, 255, 255, 0.5);

  /* ========================================
     SCROLLBAR
     ======================================== */
  --scrollbar-track-bg: var(--theme-bg-secondary);
  --scrollbar-thumb-bg: var(--theme-surface-elevated);
  --scrollbar-thumb-hover-bg: var(--theme-border-base);

  /* ========================================
     LUXURY METALLICS - Vibrant neon-metallic hybrids
     ======================================== */
  --theme-luxury-platinum: #E8E0F0;
  --theme-luxury-rose-gold: #FF9AAD;
  --theme-luxury-champagne: #FFE5B4;

  /* VIP Tier Colors - Neon-infused */
  --theme-vip-bronze: #E87C4D;
  --theme-vip-silver: #D4D4F5;
  --theme-vip-gold: #FFD166;
  --theme-vip-platinum: #E8E0F0;
  --theme-vip-diamond: #7DF9FF;

  /* Premium Effects - Dual glow for arcade feel */
  --theme-card-premium-glow: 0 0 30px rgba(255, 209, 102, 0.4), 0 0 60px rgba(157, 78, 221, 0.2);

  /* Enhanced Gold */
  --theme-special-gold-rich: #FFD166;
  --theme-special-gold-rich-light: #FFE299;
}