/* ========================================
   2. THEME VARIABLES (LIGHT & DARK)
   ========================================
   Defines color palettes and other theme-related properties for both
   light (default) and dark modes.
*/
:root {
  /* --- 1. Backgrounds & Surfaces --- */
  --bg-primary: #f9f9f9;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f2f5;
  --bg-silver: #f5f5f5;
  --bg-hover: #e4e6e9;
  --bg-prompt: #ffedd5; /* For prompts like 'Rate this merchant' */
  --bg-overlay-dark: rgba(0, 0, 0, 0.6); /* For tags on images */
  --bg-secondary-rgb: 255, 255, 255;
  --page-bg-gradient: linear-gradient(to top right, #f0f2f5, #e6e9ed);

  /* --- 2. Typography & Text --- */
  --text-primary: #1c1e21;
  --text-secondary: #606770;
  --text-tertiary: #8a8d91;
  --text-muted: #999999; /* Muted text color */
  --accent-text: #ffffff; /* Text on colored accent backgrounds */
  --text-google-btn: #3c4043;
  --dark-color: #1c1e21; /* Dark text color */
  --gray: #606770; /* Gray text color */
  --light-color: #ffffff; /* Light/white color */
  --gray-light: #f0f2f5; /* Light gray background */

  /* --- 3. Accents & Actions --- */
  --accent-primary: #4361ee;
  --accent-primary-hover: #3a53c4;
  --accent-primary-rgb: 67, 97, 238;
  --primary-color: #4361ee; /* Alias for accent-primary */
  --primary-light: #4895ef; /* Light variant of primary color */
  --accent-secondary: #28a745;
  --accent-secondary-hover: #218838;
  --secondary-color: #3f37c9; /* Secondary color variant */
  --accent-danger: #e74a3b;
  --accent-danger-rgb: 231, 74, 59;
  --danger-color: #f72585; /* Danger color variant */
  --accent-info: #36b9cc;
  --info-color: #7209b7; /* Info color variant */
  --accent-warning: #fbbf24; /* Added for stars */
  --warning-color: #f8961e; /* Warning color variant */
  --accent-success: #22c55e; /* Added for stock status in */
  --success-color: #4cc9f0; /* Success color variant */
  --hover-light: rgba(0, 123, 255, 0.02); /* Light hover effect */
  --hover-medium: rgba(0, 123, 255, 0.05); /* Medium hover effect */

  /* --- 4. Borders & States --- */
  --border-color: #e0e0e0;
  --card-border: 1px solid #e0e0e0; /* Border for cards and form elements */
  --card-radius: 8px; /* Border radius for cards */
  --radius: 8px; /* General border radius */
  --radius-sm: 6px; /* Small border radius */
  --radius-lg: 12px; /* Large border radius */
  --error-color: #d93025;
  --bg-skeleton: #e0e0e0;
  --bg-skeleton-shimmer: #f0f0f0;
  --button-disabled-bg: #cbd5e1; /* Added for disabled button background */
  --icon-invert-value: 0; /* FIX: Value for inverting icons (0 = no invert for light mode) */
  --transition: all 0.3s ease; /* General transition */
  --top-height: 56px; /* Header height */
  --bottom-height: 65px; /* Footer height */

  /* --- 5. Shadows & Elevation --- */
  --shadow-color: rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 8px rgba(0,0,0,0.1); /* General shadow */
  --shadow-elevation-medium: 0 -4px 20px rgba(0, 0, 0, 0.15); /* For selection container bottom shadow */
  --shadow-elevation-large: 0 10px 25px rgba(0, 0, 0, 0.2); /* For selection container modal shadow */
  --shadow-focus-primary: rgba(0, 123, 255, 0.2);
  --shadow-focus-secondary: rgba(40, 167, 69, 0.2);
  --shadow-focus-error: rgba(217, 48, 37, 0.2);
  --shadow-hover-card: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Added for card hover effect */
  --text-shadow-on-image: 0 1px 3px rgba(0,0,0,0.6); /* For text on cover photos */
  --shadow-glow-accent: 0 0 10px rgba(var(--accent-primary-rgb), 0.7); /* Default blue glow */
  --shadow-glow-story: 0 0 10px rgba(247, 37, 133, 0.6); /* Pink glow for new stories */
  --shadow-glow-viewed: 0 0 10px rgba(8, 174, 234, 0.6); /* Cyan glow for viewed stories */


  /* --- 6. Component-Specific: Header --- */
  --header-banner-dev-bg: #ffc107;
  --header-banner-dev-text: #000;
  --header-banner-promo-bg: #2196F3;
  --header-banner-promo-text: #fff;
  --header-banner-admin-bg: #455A64;
  --header-banner-admin-text: #fff;
  --header-badge-bg: #FF5722;
  --header-badge-text: #fff;

  /* --- 7. Component-Specific: Footer --- */
  --footer-compact-bar-bg: rgba(0,0,0,0.03);
  --footer-compact-bar-bg-hover: rgba(0,0,0,0.05);

  /* --- 8. Component-Specific: User Home Colors --- */
  --color-primary-user: #4361ee;
  --color-primary-light-user: #4895ef;
  --color-secondary-user: #3f37c9;
  --color-accent-user: #f72585;
  --color-success-user: #4cc9f0;
  --color-warning-user: #f8961e;
  --color-danger-user: #ef233c;

  /* --- 9. Component-Specific: Analytics Colors --- */
  --analytics-bg: #f5f7fb;
  --analytics-info: #7209b7;
  --analytics-chart-sales: #9d4edd;
  --analytics-chart-sales-bg: rgba(157, 78, 221, 0.1);
  --analytics-chart-inventory: #ffb347;
  --analytics-status-positive-bg: rgba(76, 201, 240, 0.15);
  --analytics-status-positive-text: #0c5460;
  --analytics-status-negative-bg: rgba(247, 37, 133, 0.15);
  --analytics-status-negative-text: #721c24;
  --analytics-status-pending-bg: rgba(248, 150, 30, 0.15);
  --analytics-status-pending-text: #856404;

  /* --- 9. Component-Specific: Profile Gradient Border --- */
  --profile-gradient-border: linear-gradient(135deg, #4895ef, #f72585, #f8961e); /* For profile pages */
  --story-ring-gradient: conic-gradient(from 30deg, #f97794, #f72585, #c42d8f, #833ab4, #f97794); /* For update stories */
  --story-ring-viewed-gradient: conic-gradient(from 45deg, #2af598, #009efd, #2af598); /* For viewed stories (Ocean Breeze) */

}

html.dark-mode {
  /* --- 1. Backgrounds & Surfaces --- */
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2a2a3b;
  --bg-silver: #2a2a2a;
  --bg-hover: #3a3b4c;
  --bg-prompt: #2c2a4a; /* Dark mode equivalent for prompts */
  --bg-overlay-dark: rgba(0, 0, 0, 0.7); /* Darker overlay for dark mode */
  --bg-secondary-rgb: 30, 30, 30;
  --page-bg-gradient: linear-gradient(to top right, #1a1a2e, #16213e);

  /* --- 2. Typography & Text --- */
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-tertiary: #7f8c8d;
  --text-muted: #666666; /* Muted text color for dark mode */
  --accent-text: #ffffff; /* Text on colored accent backgrounds */
  --text-google-btn: #e0e0e0;
  --dark-color: #e0e0e0; /* Dark text color */
  --gray: #a0a0a0; /* Gray text color */
  --light-color: #1e1e1e; /* Light color (dark background) */
  --gray-light: #2a2a3b; /* Light gray background */

  /* --- 3. Accents & Actions --- */
  --accent-primary: #0077b6;
  --accent-primary-hover: #005f9e;
  --accent-primary-rgb: 0, 119, 182;
  --primary-color: #0077b6; /* Alias for accent-primary */
  --primary-light: #005f9e; /* Light variant of primary color */
  --accent-secondary: #69f0ae;
  --accent-secondary-hover: #00bfa5;
  --secondary-color: #69f0ae; /* Secondary color variant */
  --accent-danger: #d00000;
  --accent-danger-rgb: 208, 0, 0;
  --danger-color: #d00000; /* Danger color variant */
  --accent-info: #0081a7;
  --info-color: #0081a7; /* Info color variant */
  --accent-warning: #fbbf24; /* Added for stars */
  --warning-color: #fbbf24; /* Warning color variant */
  --accent-success: #22c55e; /* Added for stock status in */
  --success-color: #22c55e; /* Success color variant */
  --hover-light: rgba(0, 119, 182, 0.03); /* Light hover effect for dark mode */
  --hover-medium: rgba(0, 119, 182, 0.08); /* Medium hover effect for dark mode */

  /* --- 4. Borders & States --- */
  --border-color: #333333;
  --card-border: 1px solid #333333; /* Border for cards and form elements */
  --card-radius: 8px; /* Border radius for cards */
  --radius: 8px; /* General border radius */
  --radius-sm: 6px; /* Small border radius */
  --radius-lg: 12px; /* Large border radius */
  --error-color: #ff5252;
  --bg-skeleton: #2a2a3b;
  --bg-skeleton-shimmer: #3a3b4c;
  --button-disabled-bg: #cbd5e1; /* Added for disabled button background */
  --icon-invert-value: 1; /* FIX: Value for inverting icons (1 = invert for dark mode) */
  --transition: all 0.3s ease; /* General transition */
  --top-height: 56px; /* Header height */
  --bottom-height: 65px; /* Footer height */

  /* --- 5. Shadows & Elevation --- */
  --shadow-color: rgba(255, 255, 255, 0.05); /* Changed to a light shadow for dark mode */
  --shadow: 0 2px 8px rgba(0,0,0,0.3); /* General shadow for dark mode */
  --shadow-elevation-medium: 0 -4px 20px rgba(255, 255, 255, 0.1); /* For selection container bottom shadow in dark mode */
  --shadow-elevation-large: 0 10px 25px rgba(255, 255, 255, 0.15); /* For selection container modal shadow in dark mode */
  --shadow-focus-primary: rgba(68, 138, 255, 0.25);
  --shadow-focus-secondary: rgba(105, 240, 174, 0.25);
  --shadow-focus-error: rgba(255, 82, 82, 0.25);
  --shadow-hover-card: 0 10px 15px -3px rgba(255, 255, 255, 0.07), 0 4px 6px -2px rgba(255, 255, 255, 0.05); /* Changed to a light shadow for dark mode */
  --text-shadow-on-image: 0 1px 3px rgba(0,0,0,0.8); /* Stronger shadow for dark mode */
  --shadow-glow-accent: 0 0 10px rgba(var(--accent-primary-rgb), 0.7); /* Default blue glow */
  --shadow-glow-story: 0 0 10px rgba(247, 37, 133, 0.6); /* Pink glow for new stories */
  --shadow-glow-viewed: 0 0 10px rgba(8, 174, 234, 0.6); /* Cyan glow for viewed stories */

  /* --- 6. Component-Specific: Header --- */
  --header-banner-dev-bg: #f39c12;
  --header-banner-dev-text: #fff;
  --header-banner-promo-bg: #3498db;
  --header-banner-promo-text: #fff;
  --header-banner-admin-bg: #7f8c8d;
  --header-banner-admin-text: #000;
  --header-badge-bg: #e74c3c;
  --header-badge-text: #fff;
  
  /* --- 9. Component-Specific: Profile Gradient Border (Dark Mode) --- */
  --profile-gradient-border: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); /* For profile pages */
  --story-ring-gradient: conic-gradient(from 30deg, #f97794, #f72585, #c42d8f, #833ab4, #f97794); /* For update stories */
  --story-ring-viewed-gradient: conic-gradient(from 45deg, #08aeea, #2af598, #08aeea); /* For viewed stories in dark mode (Vibrant Ocean) */

  /* --- 10. Component-Specific: Analytics Colors (Dark Mode) --- */
  --analytics-bg: #121826;
  --analytics-info: #7209b7;
  --analytics-chart-sales: #9d4edd;
  --analytics-chart-sales-bg: rgba(157, 78, 221, 0.1);
  --analytics-chart-inventory: #ffb347;
  --analytics-status-positive-bg: rgba(76, 201, 240, 0.2);
  --analytics-status-positive-text: #4cc9f0;
  --analytics-status-negative-bg: rgba(247, 37, 133, 0.2);
  --analytics-status-negative-text: #f72585;
  --analytics-status-pending-bg: rgba(248, 150, 30, 0.2);
  --analytics-status-pending-text: #f8961e;
}