:root {
  /* Gaming Theme Colors (Teal/Orange/Light) - White Backgrounds */
  --clr-primary: #00796B; /* Dark Teal */
  --clr-primary-hover: #00897B; /* Lighter Teal */
  --clr-primary-text: #FFFFFF; /* Text on primary buttons - stays white */

  --clr-accent-1: #FF8F00; /* Vibrant Orange */
  --clr-accent-2: #40C4FF; /* Electric Blue */

  --clr-background: #FFFFFF; /* White - Main page background */
  --clr-surface: #F8F9FA;    /* Very Light Grey - Card/panel backgrounds */
  --clr-border-light: #E0E0E0;
  --clr-border-medium: #CED4DA;

  --clr-sidebar-bg: #F1F3F5; /* Light Grey for Sidebar */
  --clr-sidebar-text: var(--clr-primary); /* Teal text for Sidebar */
  --clr-sidebar-active-bg: #E4E7EB; /* Slightly darker Light Grey for active */
  
  --clr-secondary-hover-bg: #E9ECEF; /* Light hover for secondary elements */

  /* Text colors for light theme */
  --clr-text-heading: var(--clr-primary); /* Teal for headings */
  --clr-text-dark: #212529;    /* Very Dark Grey/Black for primary body text */
  --clr-text-medium: #495057;  /* Dark Grey for secondary text */
  --clr-text-light: #6C757D;   /* Medium Grey for less important text/hints */
  --clr-text-lighter: #ADB5BD; /* Lighter Grey */

  --clr-white: #FFFFFF; /* Standard white */
  --clr-light-bg: #FFFFFF; /* For input fields etc. on light theme */
  --clr-row-hover-bg: #F1F3F5; /* Very light hover grey */

  /* Status/Semantic Colors (adjust for light theme contrast) */
  --clr-success: #28A745; /* Green */
  --clr-success-bg: rgba(40, 167, 69, 0.1);
  --clr-warning: #FFC107; /* Amber */
  --clr-warning-bg: rgba(255, 193, 7, 0.15);
  --clr-danger: #DC3545;  /* Red */
  --clr-danger-bg: rgba(220, 53, 69, 0.1);
  --clr-danger-bg-hover: rgba(220, 53, 69, 0.15);
  --clr-info: var(--clr-accent-2);    /* Blue */
  --clr-info-bg: rgba(64, 196, 255, 0.1);

  /* Priority / Tag Colors (adjust for light theme) */
  --clr-priority-1-bg: rgba(255, 143, 0, 0.15);  /* Orange accent */
  --clr-priority-1-text: #D97700; /* Darker Orange text for light bg */
  --clr-priority-2-bg: rgba(0, 121, 107, 0.1);  /* Teal primary */
  --clr-priority-2-text: var(--clr-primary);
  --clr-priority-3-bg: rgba(64, 196, 255, 0.15); /* Blue accent */
  --clr-priority-3-text: #006ABC; /* Darker Blue text */
  --clr-priority-4-bg: rgba(102, 187, 106, 0.15);   /* Greenish */
  --clr-priority-4-text: #38761D; /* Darker Green text */

  /* Chart Specific colors - these can be overridden in JS if needed */
  --chart-color-1: var(--clr-primary);
  --chart-color-2: var(--clr-accent-1);
  --chart-color-3: var(--clr-accent-2);
  --chart-color-4: #6A0DAD; /* Purple - distinct color */
  --chart-color-5: #FFC107; /* Amber - distinct color */

  /* --- Reference Dark Theme Scheme (Commented out for clarity) ---
  --clr-background: #424242; 
  --clr-surface: #555555;    
  --clr-border-light: #676767;
  --clr-border-medium: #797979;
  --clr-sidebar-bg: #263238; 
  --clr-sidebar-text: #B2DFDB; 
  --clr-sidebar-active-bg: #37474F; 
  --clr-secondary-hover-bg: #6A6A6A; 
  --clr-text-heading: var(--clr-primary); 
  --clr-text-dark: #E0E0E0;    
  --clr-text-medium: #CCCCCC;  
  --clr-text-light: #B0B0B0;   
  --clr-text-lighter: #909090; 
  --clr-white: var(--clr-surface); 
  --clr-light-bg: #606060; 
  --clr-row-hover-bg: #6E6E6E; 
  */
}

/* Override for the primary button gradient in Gaming theme (Light) */
.primary {
  background-image: none; 
  background-color: var(--clr-primary); 
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Softer shadow for light theme */
}

.primary:hover {
  background-image: none; 
  background-color: var(--clr-primary-hover); 
  filter: none; 
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly more pronounced shadow on hover */
}

/* General body background for the light theme */
body {
    background-color: var(--clr-background);
    color: var(--clr-text-dark);
}

/* Update card/widget backgrounds for light theme */
.widget, .card, .content-box, .form-container, .table-container, 
.chat-history-panel, .current-chat-panel, .message-input-area,
.modal-content {
    background-color: var(--clr-surface);
    border: 1px solid var(--clr-border-light); /* Add a light border */
}

/* Adjust input fields for light theme */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background-color: var(--clr-white); /* White background for inputs */
    border: 1px solid var(--clr-border-medium);
    color: var(--clr-text-dark);
}
input::placeholder, textarea::placeholder {
    color: var(--clr-text-lighter);
}

/* Buttons that aren't primary */
.btn-secondary {
    background-color: var(--clr-light-bg);
    color: var(--clr-text-dark);
    border: 1px solid var(--clr-border-medium);
}
.btn-secondary:hover {
    background-color: #e9ecef; /* Slightly darker hover for secondary buttons */
}

/* Override for the Grid Icon (Dashboard) in Marketing theme */
.sidebar-btn .grid-icon path {
  stroke: var(--clr-sidebar-text); /* Sidebar text color for stroke */
  fill: none;
  stroke-width: 2px !important; /* Ensure consistent stroke width */
}

.sidebar-btn .grid-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg); /* Sidebar background color for fill */
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .grid-icon path {
  stroke: var(--clr-sidebar-text); /* Keep same stroke on active */
}

.sidebar-btn.active .grid-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg); /* Use active background for fill */
}

/* Override for the Chat Bubble Icon in Marketing theme */
.sidebar-btn .chat-bubble-icon path {
  stroke: var(--clr-sidebar-text);
  fill: none;
  stroke-width: 2px !important;
}

.sidebar-btn .chat-bubble-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg);
  stroke: none;
  opacity: 1;
}

/* Style for the ellipsis dots */
.sidebar-btn .chat-bubble-icon .ellipsis-dot {
    fill: var(--clr-sidebar-text); /* Use theme text color */
    stroke: none; /* No stroke for dots */
}

/* Ensure active state styles override */
.sidebar-btn.active .chat-bubble-icon path {
  stroke: var(--clr-sidebar-text);
}

.sidebar-btn.active .chat-bubble-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg);
}

/* Active state style for ellipsis dots */
.sidebar-btn.active .chat-bubble-icon .ellipsis-dot {
    fill: var(--clr-sidebar-text); /* Keep same color on active */
}

/* Override for the Pipeline Icon in Marketing theme */
.sidebar-btn .pipeline-icon path {
  stroke: var(--clr-sidebar-text);
  fill: none;
  stroke-width: 2px !important;
}

.sidebar-btn .pipeline-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-bg);
  stroke: none;
  opacity: 1;
}

/* Ensure active state styles override */
.sidebar-btn.active .pipeline-icon path {
  stroke: var(--clr-sidebar-text);
}

.sidebar-btn.active .pipeline-icon path[opacity="0.1"] {
  fill: var(--clr-sidebar-active-bg);
}