/* ========================================
   LIGHT THEME (Default)
   ======================================== */

:root {
  /* Backgrounds - Bootstrap gray palette for light theme */
  --cards-bg-primary: #f8f9fa;      /* Bootstrap gray-100 - very light gray */
  --cards-bg-secondary: #e9ecef;    /* Bootstrap gray-200 - light gray */
  --cards-bg-tertiary: #dee2e6;     /* Bootstrap gray-300 - medium-light gray */
  --cards-bg-hover: #ced4da;        /* Bootstrap gray-400 - medium gray */
  --cards-bg-active: #adb5bd;       /* Bootstrap gray-500 - medium-dark gray */

  /* Text Colors - Dark text on light backgrounds */
  --cards-text-primary: #212529;    /* Bootstrap gray-900 - almost black */
  --cards-text-secondary: #495057;  /* Bootstrap gray-700 - dark gray */
  --cards-text-muted: #6c757d;      /* Bootstrap gray-600 - medium-dark gray */
  --cards-text-link: #0d6efd;       /* Bootstrap primary blue */
  --cards-text-link-hover: #0a58ca; /* Bootstrap primary blue hover */

  /* Borders - Light gray borders */
  --cards-border-primary: #dee2e6;  /* Bootstrap gray-300 */
  --cards-border-secondary: #ced4da; /* Bootstrap gray-400 */
  --cards-border-light: #e9ecef;    /* Bootstrap gray-200 */

  /* Shadows - Subtle shadows for light theme */
  --cards-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --cards-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --cards-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
  --cards-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);

  /* Forms & Inputs - Light theme inputs */
  --cards-input-bg: #ffffff;
  --cards-input-border: #ced4da;    /* Bootstrap gray-400 */
  --cards-input-border-focus: #86b7fe;
  --cards-input-text: #212529;
  --cards-input-placeholder: #6c757d;

  /* Overlays & Transparency */
  --cards-overlay-light: rgba(0, 0, 0, 0.05);
  --cards-overlay-medium: rgba(0, 0, 0, 0.1);
  --cards-overlay-dark: rgba(0, 0, 0, 0.2);

  /* Gradients */
  --cards-gradient-subtle: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 100%);

  /* Special States */
  --cards-owned-bg: rgba(40, 167, 69, 0.1);
  --cards-owned-bg-hover: rgba(40, 167, 69, 0.15);
  --cards-owned-border: #28a745;

  --cards-not-owned-bg: rgba(220, 53, 69, 0.1);
  --cards-not-owned-bg-hover: rgba(220, 53, 69, 0.15);
  --cards-not-owned-border: #dc3545;

  /* Badges & Labels */
  --cards-badge-bg: #e9ecef;        /* Bootstrap gray-200 */
  --cards-badge-text: #495057;      /* Bootstrap gray-700 */

  /* Dividers */
  --cards-divider: #dee2e6;         /* Bootstrap gray-300 */

  /* Image Containers */
  --cards-image-bg: #f8f9fa;        /* Bootstrap gray-100 */
  --cards-image-border: #dee2e6;    /* Bootstrap gray-300 */
}


/* ========================================
   DARK THEME (Override)
   ======================================== */

[data-bs-theme="dark"] {
  /* Backgrounds */
  --cards-bg-primary: #2b2b2b;
  --cards-bg-secondary: #3a3f44;
  --cards-bg-tertiary: #444851;
  --cards-bg-hover: #4a4e54;
  --cards-bg-active: #26292D;

  /* Text Colors */
  --cards-text-primary: #f8f9fa;
  --cards-text-secondary: #dee2e6;
  --cards-text-muted: #adb5bd;
  --cards-text-link: #daf2ff;
  --cards-text-link-hover: #ffc107;

  /* Borders */
  --cards-border-primary: #444;
  --cards-border-secondary: #555;
  --cards-border-light: #666;

  /* Shadows */
  --cards-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --cards-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --cards-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --cards-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);

  /* Forms & Inputs */
  --cards-input-bg: #2a2a2a;
  --cards-input-border: #444;
  --cards-input-border-focus: #007bff;
  --cards-input-text: #f8f9fa;
  --cards-input-placeholder: #6c757d;

  /* Overlays & Transparency */
  --cards-overlay-light: rgba(255, 255, 255, 0.05);
  --cards-overlay-medium: rgba(255, 255, 255, 0.1);
  --cards-overlay-dark: rgba(255, 255, 255, 0.2);

  /* Gradients */
  --cards-gradient-subtle: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);

  /* Special States */
  --cards-owned-bg: rgba(40, 167, 69, 0.2);
  --cards-owned-bg-hover: rgba(40, 167, 69, 0.3);
  --cards-owned-border: #28a745;

  --cards-not-owned-bg: rgba(220, 53, 69, 0.2);
  --cards-not-owned-bg-hover: rgba(220, 53, 69, 0.3);
  --cards-not-owned-border: #dc3545;

  /* Badges & Labels */
  --cards-badge-bg: #444;
  --cards-badge-text: #f8f9fa;

  /* Dividers */
  --cards-divider: #4a4e54;

  /* Image Containers */
  --cards-image-bg: rgba(255, 255, 255, 0.05);
  --cards-image-border: rgba(255, 255, 255, 0.1);
}


/* ========================================
   Theme Indepedent Constants
   ======================================== */

:root, [data-bs-theme="dark"] {
  /* Rarity Colors - DO NOT CHANGE */
  --rarity-common: #6c757d;
  --rarity-uncommon: #198754;
  --rarity-rare: #0d6efd;
  --rarity-legendary: #ffaf4d;
  --rarity-mythic: #6f42c1;
  --rarity-special: #00c3ff;

  /* Progress Levels - DO NOT CHANGE */
  --progress-excellent-start: #28a745;
  --progress-excellent-end: #34ce57;
  --progress-good-start: #20c997;
  --progress-good-end: #3dd5f3;
  --progress-average-start: #ffc107;
  --progress-average-end: #ffcd3c;
  --progress-poor-start: #fd7e14;
  --progress-poor-end: #ff922b;
  --progress-minimal-start: #dc3545;
  --progress-minimal-end: #e55353;

  /* Alert/Badge Types - DO NOT CHANGE */
  --alert-info: #0dcaf0;
  --alert-success: #198754;
  --alert-warning: #ffc107;
  --alert-danger: #dc3545;
  --alert-primary: #0d6efd;
  --alert-secondary: #6c757d;
}


/* ========================================
   COMPLETION BADGES (Theme-Aware)
   ======================================== */

/* Light Theme Completion Badges */
:root {
  --badge-excellent-bg: #d4edda;    /* Light green background */
  --badge-excellent-text: #155724;  /* Dark green text */
  --badge-good-bg: #d1ecf1;         /* Light cyan background */
  --badge-good-text: #0c5460;       /* Dark cyan text */
  --badge-average-bg: #fff3cd;      /* Light yellow background */
  --badge-average-text: #856404;    /* Dark yellow text */
  --badge-poor-bg: #f8d7da;         /* Light red background */
  --badge-poor-text: #721c24;       /* Dark red text */
  --badge-minimal-bg: #f5c6cb;      /* Light red background */
  --badge-minimal-text: #721c24;    /* Dark red text */
}

/* Dark Theme Completion Badges */
[data-bs-theme="dark"] {
  --badge-excellent-bg: rgba(40, 167, 69, 0.2);
  --badge-excellent-text: #28a745;
  --badge-good-bg: rgba(32, 201, 151, 0.2);
  --badge-good-text: #20c997;
  --badge-average-bg: rgba(255, 193, 7, 0.2);
  --badge-average-text: #ffc107;
  --badge-poor-bg: rgba(253, 126, 20, 0.2);
  --badge-poor-text: #fd7e14;
  --badge-minimal-bg: rgba(220, 53, 69, 0.2);
  --badge-minimal-text: #dc3545;
}