/**
 * Volt Brand Custom CSS for Fider
 *
 * Primary Colors:
 * - Purple #502379 (primary brand)
 * - Yellow #FDC220
 * - Green #1BBE6F
 * - Blue #82D0F4
 * - Red #E63E12
 */
 
/* ============================================
   PRIMARY BRAND COLOR (Volt Purple)
   ============================================ */
 
:root {
  /* Main primary color variables */
  --primary-color: #502379;
  --primary-color-light: #7a4b9e;
  --primary-color-dark: #3a1855;
}
 
/* ============================================
   LIGHT THEME COLOR OVERRIDES
   ============================================ */
 
body[data-theme="light"] {
  /* Primary Purple - Full scale */
  --colors-primary-50: #f5f0f9;
  --colors-primary-100: #e8ddf2;
  --colors-primary-200: #d1bae5;
  --colors-primary-300: #b997d8;
  --colors-primary-400: #9569bf;
  --colors-primary-500: #502379;  /* Main Volt Purple */
  --colors-primary-600: #461e6a;
  --colors-primary-700: #3a1855;
  --colors-primary-800: #2d1341;
  --colors-primary-900: #1f0d2b;
  --colors-primary-base: #502379;
  --colors-primary-dark: #3a1855;
 
  /* Green - Volt Green as base */
  --colors-green-50: #ecfdf6;
  --colors-green-100: #d1fae9;
  --colors-green-200: #a7f3d5;
  --colors-green-300: #6ee7bb;
  --colors-green-400: #34d399;
  --colors-green-500: #1BBE6F;  /* Main Volt Green */
  --colors-green-600: #17a85f;
  --colors-green-700: #138d4f;
  --colors-green-800: #10713f;
  --colors-green-900: #0d5530;
 
  /* Yellow - Volt Yellow as base */
  --colors-yellow-50: #fffceb;
  --colors-yellow-100: #fff8d1;
  --colors-yellow-200: #fff0a3;
  --colors-yellow-300: #ffe66e;
  --colors-yellow-400: #ffd745;
  --colors-yellow-500: #FDC220;  /* Main Volt Yellow */
  --colors-yellow-600: #e8ad0a;
  --colors-yellow-700: #c08f07;
  --colors-yellow-800: #9d740d;
  --colors-yellow-900: #82600f;
 
  /* Blue - Volt Blue as base */
  --colors-blue-50: #f0f9ff;
  --colors-blue-100: #e0f2fe;
  --colors-blue-200: #bae6fd;
  --colors-blue-300: #82D0F4;  /* Main Volt Blue */
  --colors-blue-400: #5dbef2;
  --colors-blue-500: #38acf0;
  --colors-blue-600: #2997e0;
  --colors-blue-700: #1d7bc5;
  --colors-blue-800: #1862a0;
  --colors-blue-900: #155184;
 
  /* Red - Volt Red as base */
  --colors-red-50: #fef2f2;
  --colors-red-100: #fee2e2;
  --colors-red-200: #fecaca;
  --colors-red-300: #fca5a5;
  --colors-red-400: #f87171;
  --colors-red-500: #E63E12;  /* Main Volt Red */
  --colors-red-600: #d03710;
  --colors-red-700: #b92f0e;
  --colors-red-800: #9c270c;
  --colors-red-900: #7f1f0a;
}
 
/* ============================================
   DARK THEME COLOR OVERRIDES
   ============================================ */
 
body[data-theme="dark"] {
  /* Primary Purple - Adjusted for dark theme readability */
  --colors-primary-50: #1f0d2b;
  --colors-primary-100: #2d1341;
  --colors-primary-200: #3a1855;
  --colors-primary-300: #461e6a;
  --colors-primary-400: #502379;
  --colors-primary-500: #7a4b9e;  /* Lighter for dark theme */
  --colors-primary-600: #9569bf;
  --colors-primary-700: #b997d8;
  --colors-primary-800: #d1bae5;
  --colors-primary-900: #e8ddf2;
  --colors-primary-base: #7a4b9e;
  --colors-primary-dark: #9569bf;
 
  /* Green - Adjusted for dark theme */
  --colors-green-50: #0d5530;
  --colors-green-100: #10713f;
  --colors-green-200: #138d4f;
  --colors-green-300: #17a85f;
  --colors-green-400: #1BBE6F;
  --colors-green-500: #34d399;
  --colors-green-600: #6ee7bb;
  --colors-green-700: #a7f3d5;
  --colors-green-800: #d1fae9;
  --colors-green-900: #ecfdf6;
 
  /* Yellow - Adjusted for dark theme */
  --colors-yellow-50: #82600f;
  --colors-yellow-100: #9d740d;
  --colors-yellow-200: #c08f07;
  --colors-yellow-300: #e8ad0a;
  --colors-yellow-400: #FDC220;
  --colors-yellow-500: #ffd745;
  --colors-yellow-600: #ffe66e;
  --colors-yellow-700: #fff0a3;
  --colors-yellow-800: #fff8d1;
  --colors-yellow-900: #fffceb;
 
  /* Blue - Adjusted for dark theme */
  --colors-blue-50: #155184;
  --colors-blue-100: #1862a0;
  --colors-blue-200: #1d7bc5;
  --colors-blue-300: #2997e0;
  --colors-blue-400: #38acf0;
  --colors-blue-500: #5dbef2;
  --colors-blue-600: #82D0F4;
  --colors-blue-700: #bae6fd;
  --colors-blue-800: #e0f2fe;
  --colors-blue-900: #f0f9ff;
 
  /* Red - Adjusted for dark theme */
  --colors-red-50: #7f1f0a;
  --colors-red-100: #9c270c;
  --colors-red-200: #b92f0e;
  --colors-red-300: #d03710;
  --colors-red-400: #E63E12;
  --colors-red-500: #f87171;
  --colors-red-600: #fca5a5;
  --colors-red-700: #fecaca;
  --colors-red-800: #fee2e2;
  --colors-red-900: #fef2f2;
}
 
/* ============================================
   SPECIFIC COMPONENT OVERRIDES
   ============================================ */
 
/* Primary buttons with Volt Purple */
.c-button--primary,
button.c-button--primary {
  background-color: #502379 !important;
  border-color: #502379 !important;
}
 
.c-button--primary:hover,
button.c-button--primary:hover {
  background-color: #3a1855 !important;
  border-color: #3a1855 !important;
}
 
body[data-theme="dark"] .c-button--primary,
body[data-theme="dark"] button.c-button--primary {
  background-color: #7a4b9e !important;
  border-color: #7a4b9e !important;
}
 
body[data-theme="dark"] .c-button--primary:hover,
body[data-theme="dark"] button.c-button--primary:hover {
  background-color: #9569bf !important;
  border-color: #9569bf !important;
}
 
/* Links with Volt Purple */
a,
.text-link {
  color: #502379 !important;
}
 
a:hover,
.text-link:hover {
  color: #3a1855 !important;
}
 
body[data-theme="dark"] a,
body[data-theme="dark"] .text-link {
  color: #9569bf !important;
}
 
body[data-theme="dark"] a:hover,
body[data-theme="dark"] .text-link:hover {
  color: #b997d8 !important;
}
 
/* Input focus states with Volt Purple */
input:focus,
textarea:focus,
select:focus {
  border-color: #502379 !important;
  box-shadow: 0 0 0 3px rgba(80, 35, 121, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}
 
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus {
  border-color: #7a4b9e !important;
  box-shadow: 0 0 0 3px rgba(122, 75, 158, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}
 
/* Vote button active state */
.vote-counter-button.voted,
.vote-counter-button:hover {
  color: #502379 !important;
  border-color: #502379 !important;
}
 
body[data-theme="dark"] .vote-counter-button.voted,
body[data-theme="dark"] .vote-counter-button:hover {
  color: #9569bf !important;
  border-color: #9569bf !important;
}
 
/* Active menu items and navigation */
.c-menu-item--active,
.c-menu-item.active {
  color: #502379 !important;
  border-left-color: #502379 !important;
}
 
body[data-theme="dark"] .c-menu-item--active,
body[data-theme="dark"] .c-menu-item.active {
  color: #9569bf !important;
  border-left-color: #9569bf !important;
}
 
/* Status badges and labels */
.c-tag--success {
  background-color: rgba(27, 190, 111, 0.1) !important;
  color: #138d4f !important;
}
 
.c-tag--warning {
  background-color: rgba(253, 194, 32, 0.1) !important;
  color: #c08f07 !important;
}
 
.c-tag--error {
  background-color: rgba(230, 62, 18, 0.1) !important;
  color: #b92f0e !important;
}
 
.c-tag--info {
  background-color: rgba(130, 208, 244, 0.1) !important;
  color: #1d7bc5 !important;
}
 
/* Radio buttons and checkboxes */
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background-color: #502379 !important;
  border-color: #502379 !important;
}
 
body[data-theme="dark"] input[type="radio"]:checked,
body[data-theme="dark"] input[type="checkbox"]:checked {
  background-color: #7a4b9e !important;
  border-color: #7a4b9e !important;
}
 
/* Progress bars and loading indicators */
.c-progress-bar {
  background-color: #502379 !important;
}
 
body[data-theme="dark"] .c-progress-bar {
  background-color: #7a4b9e !important;
}
 
/* Notification dots and badges */
.c-notification-dot,
.c-badge--primary {
  background-color: #502379 !important;
}
 
body[data-theme="dark"] .c-notification-dot,
body[data-theme="dark"] .c-badge--primary {
  background-color: #7a4b9e !important;
}