/* ============================================
   COLOR VARIABLES - Maroon & Dark Off-White Theme
   ============================================ */

:root {
  /* Primary Maroon Colors */
  --primary-maroon: #800000;
  --secondary-maroon: #660000;
  --accent-maroon: #A00000;
  --light-maroon: #B30000;
  --maroon-hover: #990000;
  --link-blue: #add8e6;

  /* Background Colors */
  --bg-light: #F5F3F0;
  --bg-lighter: #F9F7F4;
  --bg-white: #FFFFFF;
  --bg-dark: #E8E6E3;

  /* Text Colors */
  --text-dark: #333333;
  --text-medium: #666666;
  --text-light: #999999;
  --text-white: #FFFFFF;

  /* Border Colors */
  --border-light: #E8E6E3;
  --border-medium: #D0CECA;
  --border-dark: #B8B5B1;

  /* Status Colors */
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #17a2b8;

  /* Shadow */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-maroon: 0 4px 8px rgba(128, 0, 0, 0.2);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Font Sizes */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-xxl: 32px;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark mode variables */
body.dark-mode {
  /* Using RealtimeColors palette: #e7f0dc, #000000, #badd93, #578323, #89d134 */
  --bg-dark-gradient-start: #000000;
  --bg-dark-gradient-end: #0d0d0d;

  --primary-maroon: #badd93;
  --secondary-maroon: #578323;
  --accent-maroon: #91d882;
  --light-maroon: #89d134;
  --maroon-hover: #89d134;

  --bg-light: #1a1a1a;
  /* Fallback for the solid background where gradient isn't applied */
  --bg-lighter: #262626;
  /* Slightly darker shade */
  --bg-white: #0d0d0d;
  /* Cards and modal backgrounds */
  --bg-dark: #000000;

  --text-dark: #e7f0db;
  --text-medium: #badd93;
  --text-light: #578323;
  --text-white: #0d1208;

  --border-light: #1a1a1a;
  --border-medium: #333333;
  --border-dark: #4d4d4d;

  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --description-link-color: var(--link-blue);
}

/* Gray mode variables */
body.gray-mode {
  --bg-dark-gradient-start: #161616;
  --bg-dark-gradient-end: #000000;

  --primary-maroon: #ff6360;
  --secondary-maroon: #ff8222;
  --accent-maroon: #ff6360;
  --light-maroon: #ff8222;
  --maroon-hover: #ff6360;

  --bg-light: #2b2b2b;
  --bg-lighter: #333333;
  --bg-white: #1a1a1a;
  --bg-dark: #161616;

  --text-dark: #eae9f1;
  --text-medium: #c4c1d7;
  --text-light: #8983af;
  --text-white: #ffffff;

  --border-light: #2b2b2b;
  --border-medium: #404040;
  --border-dark: #595959;

  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --description-link-color: var(--link-blue);
}