:root {
  --badge-50: 255 241 243;
  --badge-100: 255 228 233;
  --badge-200: 254 205 213;
  --badge-300: 253 164 179;
  --badge-400: 251 113 137;
  --badge-500: 244 63 94;
  --badge-600: 225 29 63;
  --badge-700: 190 18 47;
  --badge-800: 159 18 42;
  --badge-900: 136 19 39;
  --badge-950: 76 5 17;

  --primary-50: 239 246 255;
  --primary-100: 219 234 254;
  --primary-200: 191 219 254;
  --primary-300: 147 197 253;
  --primary-400: 96 165 250;
  --primary-500: 59 130 246;
  --primary-600: 37 99 235;
  --primary-700: 29 78 216;
  --primary-800: 30 64 175;
  --primary-900: 30 58 138;
  --primary-950: 23 37 84;

  --framework-50: 250 250 250;
  --framework-100: 244 244 245;
  --framework-200: 228 228 231;
  --framework-300: 212 212 216;
  --framework-400: 161 161 170;
  --framework-500: 113 113 122;
  --framework-600: 82 82 91;
  --framework-700: 63 63 70;
  --framework-800: 39 39 42;
  --framework-900: 24 24 27;
  --framework-950: 9 9 11;

  --bg-authorization: #f1f5f9;

  --bg-header: #334155;
  --bg-nav: #f1f5f9;
  --bg-nav-hover: #e2e8f0;
  --bg-nav-todo: #e80868;

  --bg-button: #334155;
  --bg-button-hover: #2B2D41;

  --border-nav: #e80868;

  --text-authorization: #334155;

  --text-header: #334155;

  --text-nav: #334155;
  --text-nav-header: #334155;
  --text-nav-profile: #fff;

  --text-link: #2563eb;
  --text-button: #fff;

  --text-light: #c3c4c7;

  --chart-border: #f1f5f9;
  --chart-stroke: #fff;
  --chart-forecolor: #374151;
  --chart-axis-border: #e5e7eb;

  --insights-done: #10b981;
  --insights-not-started: #e5e7eb;
  --insights-in-progress: #0ea5e9;
  --insights-should-have-started: #f59e0c;
  --insights-waiting: #3c82f6;
  --insights-rejected: #f97315;
  --insights-overdue: #f43f5f;
  --insights-skipped: #9ca3af;
}

/* Mobile app color overrides */
.mobile-app {
  --framework-50: 242 242 247;
  --framework-100: 229 229 234;
  --framework-200: 209 209 214;
  --framework-300: 199 199 204;
  --framework-400: 174 174 178;
  --framework-500: 142 142 147;
  --framework-600: 99 99 102;
  --framework-700: 72 72 74;
  --framework-800: 44 44 46;
  --framework-900: 28 28 30;
  --framework-950: 0 0 0;
}

.mobile-app.dark {
  --framework-50: 242 242 247;
  --framework-100: 229 229 234;
  --framework-200: 199 199 204;
  --framework-300: 174 174 178;
  --framework-400: 142 142 147;
  --framework-500: 99 99 102;
  --framework-600: 72 72 74;
  --framework-700: 58 58 60;
  --framework-800: 44 44 46;
  --framework-900: 28 28 30;
  --framework-950: 0 0 0;
}

/* Dark mode chart colors */
.dark {
  --chart-border: #374151;
  --chart-stroke: #1f2937;
  --chart-forecolor: #d1d5db;
  --chart-axis-border: #374151;
}