/**
 * Theme Configuration - CSS Custom Properties
 * Easy color theme management for all pages
 * 
 * Usage: Change the values in :root to instantly update the entire theme
 * To create new themes, simply override these variables in a new CSS file
 */

:root {
  /* === PRIMARY BRAND COLORS === */
  --primary-color: #6f42c1;           /* Purple - main brand color */
  --primary-color-rgb: 111, 66, 193;  /* RGB version for rgba() usage */
  --secondary-color: #007bff;          /* Blue - secondary brand color */
  --secondary-color-rgb: 0, 123, 255; /* RGB version for rgba() usage */
  
  /* === BACKGROUND COLORS === */
  --body-bg: #f8f9fa;                 /* Light gray - main background */
  --surface-bg: white;                /* White - cards, modals, etc. */
  --overlay-bg: rgba(0, 0, 0, 0.5);   /* Dark overlay for modals */
  
  /* === TEXT COLORS === */
  --text-primary: #212529;            /* Dark text - main content */
  --text-secondary: #6c757d;          /* Gray text - secondary content */
  --text-muted: #adb5bd;              /* Light gray - muted text */
  --text-white: white;                /* White text - on dark backgrounds */
  --text-light: #f8f9fa;              /* Very light text */
  --text-white-alpha-8: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  --text-white-alpha-7: rgba(255, 255, 255, 0.7); /* More transparent white */
  
  /* === GRADIENT COMBINATIONS === */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-footer: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* === BORDER COLORS === */
  --border-light: #dee2e6;            /* Light borders */
  --border-primary: var(--primary-color); /* Primary color borders */
  --border-white-alpha: rgba(255, 255, 255, 0.1); /* Transparent white borders */
  
  /* === SHADOW COLORS === */
  --shadow-primary: rgba(var(--primary-color-rgb), 0.3);
  --shadow-light: rgba(var(--primary-color-rgb), 0.1);
  --shadow-focus: rgba(255, 255, 255, 0.25);
  --shadow-default: rgba(0, 0, 0, 0.1);       /* Default shadow for cards */
  --shadow-hover: rgba(0, 0, 0, 0.15);        /* Hover shadow for cards */
  
  /* === STATE COLORS === */
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --info-color: #17a2b8;
  
  /* === STATE BACKGROUNDS === */
  --success-bg: #d4edda;
  --warning-bg: #fff3cd;
  --danger-bg: #f8d7da;
  --info-bg: #d1ecf1;
  
  /* === STATE TEXT COLORS === */
  --success-text: #155724;
  --warning-text: #856404;
  --danger-text: #721c24;
  --info-text: #0c5460;
  
  /* === STATE BORDERS === */
  --success-border: #c3e6cb;
  --warning-border: #ffeaa7;
  --danger-border: #f5c6cb;
  --info-border: #bee5eb;
  
  /* === INTERACTIVE ELEMENTS === */
  --link-color: var(--primary-color);
  --link-hover-color: var(--secondary-color);
  --button-hover-bg: rgba(255, 255, 255, 0.1);
  --filter-selected-bg: var(--primary-color);
  --filter-selected-text: var(--text-white);
}

/* === ALTERNATIVE THEMES === */
/* Uncomment one of these sections to apply a different theme */

/* DARK THEME */
/*
:root {
  --primary-color: #bb86fc;
  --primary-color-rgb: 187, 134, 252;
  --secondary-color: #03dac6;
  --secondary-color-rgb: 3, 218, 198;
  
  --body-bg: #121212;
  --surface-bg: #1e1e1e;
  --overlay-bg: rgba(0, 0, 0, 0.8);
  
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --text-muted: #666666;
  --text-white: #ffffff;
  --text-light: #f0f0f0;
  
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-hero: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
  --gradient-footer: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
  
  --border-light: #333333;
  --shadow-primary: rgba(var(--primary-color-rgb), 0.5);
  --shadow-light: rgba(var(--primary-color-rgb), 0.2);
}
*/

/* GREEN THEME */
/*
:root {
  --primary-color: #28a745;
  --primary-color-rgb: 40, 167, 69;
  --secondary-color: #20c997;
  --secondary-color-rgb: 32, 201, 151;
  
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-hero: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  --gradient-footer: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
}
*/

/* ORANGE THEME */
/*
:root {
  --primary-color: #fd7e14;
  --primary-color-rgb: 253, 126, 20;
  --secondary-color: #e83e8c;
  --secondary-color-rgb: 232, 62, 140;
  
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-hero: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  --gradient-footer: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}
*/

/* === THEME UTILITIES === */
.theme-bg-primary { background-color: var(--primary-color) !important; }
.theme-bg-surface { background-color: var(--surface-bg) !important; }
.theme-text-primary { color: var(--text-primary) !important; }
.theme-text-secondary { color: var(--text-secondary) !important; }
.theme-border-primary { border-color: var(--primary-color) !important; }

/* === RESPONSIVE THEME ADJUSTMENTS === */
@media (prefers-color-scheme: dark) {
  /* Auto dark theme if user prefers dark mode - uncomment to enable */
  /*
  :root {
    --body-bg: #121212;
    --surface-bg: #1e1e1e;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --border-light: #333333;
  }
  */
}