/* static/css/colors.css */
/*
  Application Color Palette
  -------------------------
  Defines the application's color system using CSS variables.
  RGB components are used to allow for Tailwind's opacity modifiers (e.g., bg-primary-light/50).
  All color combinations are designed to meet WCAG AA contrast standards.
*/

:root {
  /* --- Light Mode Palette --- */
  --primary-light: 47 124 107;      /* Teal-700 (#2f7c6b) - For primary actions and highlights. */
  --secondary-light: 79 209 197;   /* Teal-400 (#4fd1c5) - For secondary elements and accents. */
  --accent-light: 245 158 11;      /* Amber-500 (#f59e0b) - For call-to-action buttons. */

  /* Backgrounds */
  --background-light: 249 250 251; /* Gray-50 (#f9fafb) - The main page background. */
  --surface-light: 255 255 255;    /* White (#ffffff) - For cards and primary surfaces. */
  --surface-darker-light: 243 244 246; /* Gray-100 (#f3f4f6) - For hovered or active elements. */
  --surface-accent-light: 240 253 250; /* Teal-50 (#f0fdfa) - For accordion summaries */

  /* Text */
  --text-primary-light: 31 41 55;  /* Gray-800 (#1f2937) - For primary text and headings. */
  --text-secondary-light: 107 114 128; /* Gray-500 (#6b7280) - For secondary text and labels. */

  /* Borders */
  --border-light: 229 231 235;     /* Gray-200 (#e5e7eb) - For card and input borders. */

  /* --- Status Colors --- */
  --status-green: 22 163 74;      /* Green-600 (#16a34a) - For success states. */
  --status-amber: 245 158 11;     /* Amber-500 (#f59e0b) - For warning or partial states. */
  --status-red: 225 29 72;        /* Rose-600 (#e11d48) - For danger or error states. */
  --status-green-bg: 220 252 231; /* Green-100 (#dcfce7) - Background for success pills. */
  --status-amber-bg: 254 243 199; /* Amber-100 (#fef3c7) - Background for warning pills. */
  --status-red-bg: 255 228 230;   /* Rose-100 (#ffe4e6) - Background for danger pills. */

  /* --- Avatar Colors --- */
  --avatar-1: 147 197 253; /* Blue-300 (#93c5fd) */
  --avatar-2: 110 231 183; /* Emerald-300 (#6ee7b7) */
  --avatar-3: 252 211 77;  /* Yellow-400 (#fcd34d) */
  --avatar-4: 251 113 133; /* Rose-400 (#fb7185) */
  --avatar-5: 196 181 253; /* Violet-300 (#c4b5fd) */
  --avatar-6: 252 165 165; /* Red-300 (#fca5a5) */
  --avatar-7: 107 114 128; /* Gray-500 (#6b7280) */
  --avatar-8: 74 222 128;  /* Green-400 (#4ade80) */
  --avatar-9: 250 204 21;  /* Yellow-400 (#facd15) - Alt */
  --avatar-10: 96 165 250; /* Blue-400 (#60a5fa) */
}

.dark {
  /* --- Dark Mode Palette --- */
  --primary-dark: 79 209 197;      /* Teal-400 (#4fd1c5) - Primary actions pop against the dark background. */
  --secondary-dark: 47 124 107;   /* Teal-700 (#2f7c6b) - For secondary elements. */
  --accent-dark: 245 158 11;      /* Amber-500 (#f59e0b) - For consistent call-to-actions. */

  /* Backgrounds */
  --background-dark: 17 24 39;    /* Gray-900 (#111827) - The main page background. */
  --surface-dark: 31 41 55;       /* Gray-800 (#1f2937) - For cards and primary surfaces. */
  --surface-darker-dark: 55 65 81; /* Gray-700 (#374151) - For hovered or active elements. */
  --surface-accent-dark: 51 65 85; /* Slate-700 (#334155) - For accordion summaries */

  /* Text */
  --text-primary-dark: 229 231 235; /* Gray-200 (#e5e7eb) - For primary text and headings. */
  --text-secondary-dark: 156 163 175;/* Gray-400 (#9ca3af) - For secondary text and labels. */

  /* Borders */
  --border-dark: 55 65 81;        /* Gray-700 (#374151) - For card and input borders. */
}

/* --- High Contrast Mode Overrides --- */
.high-contrast {
  /* High Contrast Light Mode */
  --background-light: 255 255 255;
  --surface-light: 255 255 255;
  --surface-darker-light: 229 231 235;
  --surface-accent-light: 255 255 255;
  --text-primary-light: 0 0 0;
  --text-secondary-light: 0 0 0;
  --border-light: 0 0 0;
  --primary-light: 37 99 235;
  --secondary-light: 37 99 235;
  --accent-light: 202 138 4;
  --avatar-1: 253 230 138;
  --avatar-2: 134 239 172;
  --avatar-3: 125 211 252;
  --avatar-4: 248 113 113;
  --avatar-5: 191 219 254;
  --avatar-6: 252 211 77;
  --avatar-7: 167 243 208;
  --avatar-8: 253 224 71;
  --avatar-9: 147 197 253;
  --avatar-10: 251 146 60;
}

.dark .high-contrast {
  /* High Contrast Dark Mode */
  --background-dark: 0 0 0;
  --surface-dark: 0 0 0;
  --surface-darker-dark: 55 65 81;
  --surface-accent-dark: 0 0 0;
  --text-primary-dark: 255 255 255;
  --text-secondary-dark: 255 255 255;
  --border-dark: 255 255 255;
  --primary-dark: 250 204 21;
  --secondary-dark: 250 204 21;
  --accent-dark: 59 130 246;
  --avatar-1: 185 28 28;
  --avatar-2: 21 128 61;
  --avatar-3: 29 78 216;
  --avatar-4: 124 58 237;
  --avatar-5: 190 24 93;
  --avatar-6: 4 120 87;
  --avatar-7: 161 98 7;
  --avatar-8: 7 89 133;
  --avatar-9: 107 33 168;
  --avatar-10: 17 94 89;
}