/**
 * Global design system palettes — CSS variables + utility classes.
 * Use var(--blue-500) in CSS, or classes like .text-blue-500 / .bg-green-100.
 */
:root {
  /* Orange */
  --orange-50: #fef3eb;
  --orange-100: #feede0;
  --orange-200: #fcd9bf;
  --orange-300: #f9b47c;
  --orange-400: #f79f66;
  --orange-500: #f58432;
  --orange-600: #dd772d;
  --orange-700: #c46a28;
  --orange-800: #b86326;
  --orange-900: #934f1e;
  --orange-950: #6e3b16;
  --orange-darker: #562e12;
  --orange-darkest: #1b0f05;
  --orange-light: var(--orange-50);
  --orange-light-hover: var(--orange-100);
  --orange-light-active: var(--orange-200);
  --orange-normal: var(--orange-500);
  --orange-normal-hover: var(--orange-600);
  --orange-normal-active: var(--orange-700);
  --orange-dark: var(--orange-800);
  --orange-dark-hover: var(--orange-900);
  --orange-dark-active: var(--orange-950);

  /* Blue */
  --blue-50: #e6eef7;
  --blue-100: #d9e5f3;
  --blue-200: #b1c9e5;
  --blue-500: #0352ac;
  --blue-600: #034a9b;
  --blue-700: #02428a;
  --blue-800: #023a81;
  --blue-900: #023167;
  --blue-950: #01254d;
  --blue-darker: #011d3c;
  --blue-light: var(--blue-50);
  --blue-light-hover: var(--blue-100);
  --blue-light-active: var(--blue-200);
  --blue-normal: var(--blue-500);
  --blue-normal-hover: var(--blue-600);
  --blue-normal-active: var(--blue-700);
  --blue-dark: var(--blue-800);
  --blue-dark-hover: var(--blue-900);
  --blue-dark-active: var(--blue-950);

  /* Yellow */
  --yellow-50: #fffac6;
  --yellow-100: #fff7d9;
  --yellow-200: #ffeeab;
  --yellow-500: #ffc601;
  --yellow-600: #e6b401;
  --yellow-700: #cc9f01;
  --yellow-800: #bf9601;
  --yellow-900: #997801;
  --yellow-950: #735a00;
  --yellow-darker: #594600;
  --yellow-light: var(--yellow-50);
  --yellow-light-hover: var(--yellow-100);
  --yellow-light-active: var(--yellow-200);
  --yellow-normal: var(--yellow-500);
  --yellow-normal-hover: var(--yellow-600);
  --yellow-normal-active: var(--yellow-700);
  --yellow-dark: var(--yellow-800);
  --yellow-dark-hover: var(--yellow-900);
  --yellow-dark-active: var(--yellow-950);

  /* Green */
  --green-50: #eff6ef;
  --green-100: #e7f1e7;
  --green-200: #cde2cd;
  --green-500: #5da25f;
  --green-600: #549256;
  --green-700: #4a824c;
  --green-800: #467a47;
  --green-900: #386139;
  --green-950: #2a492b;
  --green-darker: #213921;
  --green-light: var(--green-50);
  --green-light-hover: var(--green-100);
  --green-light-active: var(--green-200);
  --green-normal: var(--green-500);
  --green-normal-hover: var(--green-600);
  --green-normal-active: var(--green-700);
  --green-dark: var(--green-800);
  --green-dark-hover: var(--green-900);
  --green-dark-active: var(--green-950);

  /* Red */
  --red-50: #fcebec;
  --red-100: #fae1e2;
  --red-200: #f5c2c3;
  --red-500: #e03a3d;
  --red-600: #ca3437;
  --red-700: #b32e31;
  --red-800: #a82c2e;
  --red-900: #862325;
  --red-950: #651a1b;
  --red-darker: #4e1415;
  --red-light: var(--red-50);
  --red-light-hover: var(--red-100);
  --red-light-active: var(--red-200);
  --red-normal: var(--red-500);
  --red-normal-hover: var(--red-600);
  --red-normal-active: var(--red-700);
  --red-dark: var(--red-800);
  --red-dark-hover: var(--red-900);
  --red-dark-active: var(--red-950);
}

/* ── Orange utilities ── */

.text-orange-50 { color: var(--orange-50); }
.text-orange-100 { color: var(--orange-100); }
.text-orange-200 { color: var(--orange-200); }
.text-orange-300 { color: var(--orange-300); }
.text-orange-400 { color: var(--orange-400); }
.text-orange-500 { color: var(--orange-500); }
.text-orange-600 { color: var(--orange-600); }
.text-orange-700 { color: var(--orange-700); }
.text-orange-800 { color: var(--orange-800); }
.text-orange-900 { color: var(--orange-900); }
.text-orange-950 { color: var(--orange-950); }
.text-orange-darker { color: var(--orange-darker); }
.text-orange-darkest { color: var(--orange-darkest); }

.bg-orange-50 { background-color: var(--orange-50); }
.bg-orange-100 { background-color: var(--orange-100); }
.bg-orange-200 { background-color: var(--orange-200); }
.bg-orange-300 { background-color: var(--orange-300); }
.bg-orange-400 { background-color: var(--orange-400); }
.bg-orange-500 { background-color: var(--orange-500); }
.bg-orange-600 { background-color: var(--orange-600); }
.bg-orange-700 { background-color: var(--orange-700); }
.bg-orange-800 { background-color: var(--orange-800); }
.bg-orange-900 { background-color: var(--orange-900); }
.bg-orange-950 { background-color: var(--orange-950); }
.bg-orange-darker { background-color: var(--orange-darker); }
.bg-orange-darkest { background-color: var(--orange-darkest); }

.border-orange-50 { border-color: var(--orange-50); }
.border-orange-100 { border-color: var(--orange-100); }
.border-orange-200 { border-color: var(--orange-200); }
.border-orange-300 { border-color: var(--orange-300); }
.border-orange-400 { border-color: var(--orange-400); }
.border-orange-500 { border-color: var(--orange-500); }
.border-orange-600 { border-color: var(--orange-600); }
.border-orange-700 { border-color: var(--orange-700); }
.border-orange-800 { border-color: var(--orange-800); }
.border-orange-900 { border-color: var(--orange-900); }
.border-orange-950 { border-color: var(--orange-950); }
.border-orange-darker { border-color: var(--orange-darker); }
.border-orange-darkest { border-color: var(--orange-darkest); }

.hover\:text-orange-50:hover { color: var(--orange-50); }
.hover\:text-orange-100:hover { color: var(--orange-100); }
.hover\:text-orange-200:hover { color: var(--orange-200); }
.hover\:text-orange-300:hover { color: var(--orange-300); }
.hover\:text-orange-400:hover { color: var(--orange-400); }
.hover\:text-orange-500:hover { color: var(--orange-500); }
.hover\:text-orange-600:hover { color: var(--orange-600); }
.hover\:text-orange-700:hover { color: var(--orange-700); }
.hover\:text-orange-800:hover { color: var(--orange-800); }
.hover\:text-orange-900:hover { color: var(--orange-900); }
.hover\:text-orange-950:hover { color: var(--orange-950); }

.hover\:bg-orange-50:hover { background-color: var(--orange-50); }
.hover\:bg-orange-100:hover { background-color: var(--orange-100); }
.hover\:bg-orange-200:hover { background-color: var(--orange-200); }
.hover\:bg-orange-300:hover { background-color: var(--orange-300); }
.hover\:bg-orange-400:hover { background-color: var(--orange-400); }
.hover\:bg-orange-500:hover { background-color: var(--orange-500); }
.hover\:bg-orange-600:hover { background-color: var(--orange-600); }
.hover\:bg-orange-700:hover { background-color: var(--orange-700); }
.hover\:bg-orange-800:hover { background-color: var(--orange-800); }
.hover\:bg-orange-900:hover { background-color: var(--orange-900); }
.hover\:bg-orange-950:hover { background-color: var(--orange-950); }

.active\:bg-orange-50:active { background-color: var(--orange-50); }
.active\:bg-orange-100:active { background-color: var(--orange-100); }
.active\:bg-orange-200:active { background-color: var(--orange-200); }
.active\:bg-orange-300:active { background-color: var(--orange-300); }
.active\:bg-orange-400:active { background-color: var(--orange-400); }
.active\:bg-orange-500:active { background-color: var(--orange-500); }
.active\:bg-orange-600:active { background-color: var(--orange-600); }
.active\:bg-orange-700:active { background-color: var(--orange-700); }
.active\:bg-orange-800:active { background-color: var(--orange-800); }
.active\:bg-orange-900:active { background-color: var(--orange-900); }
.active\:bg-orange-950:active { background-color: var(--orange-950); }

.fill-orange-50 { fill: var(--orange-50); }
.fill-orange-100 { fill: var(--orange-100); }
.fill-orange-200 { fill: var(--orange-200); }
.fill-orange-300 { fill: var(--orange-300); }
.fill-orange-400 { fill: var(--orange-400); }
.fill-orange-500 { fill: var(--orange-500); }
.fill-orange-600 { fill: var(--orange-600); }
.fill-orange-700 { fill: var(--orange-700); }
.fill-orange-800 { fill: var(--orange-800); }
.fill-orange-900 { fill: var(--orange-900); }
.fill-orange-950 { fill: var(--orange-950); }

/* ── Blue utilities ── */

.text-blue-50 { color: var(--blue-50); }
.text-blue-100 { color: var(--blue-100); }
.text-blue-200 { color: var(--blue-200); }
.text-blue-500 { color: var(--blue-500); }
.text-blue-600 { color: var(--blue-600); }
.text-blue-700 { color: var(--blue-700); }
.text-blue-800 { color: var(--blue-800); }
.text-blue-900 { color: var(--blue-900); }
.text-blue-950 { color: var(--blue-950); }
.text-blue-darker { color: var(--blue-darker); }

.bg-blue-50 { background-color: var(--blue-50); }
.bg-blue-100 { background-color: var(--blue-100); }
.bg-blue-200 { background-color: var(--blue-200); }
.bg-blue-500 { background-color: var(--blue-500); }
.bg-blue-600 { background-color: var(--blue-600); }
.bg-blue-700 { background-color: var(--blue-700); }
.bg-blue-800 { background-color: var(--blue-800); }
.bg-blue-900 { background-color: var(--blue-900); }
.bg-blue-950 { background-color: var(--blue-950); }
.bg-blue-darker { background-color: var(--blue-darker); }

.border-blue-50 { border-color: var(--blue-50); }
.border-blue-100 { border-color: var(--blue-100); }
.border-blue-200 { border-color: var(--blue-200); }
.border-blue-500 { border-color: var(--blue-500); }
.border-blue-600 { border-color: var(--blue-600); }
.border-blue-700 { border-color: var(--blue-700); }
.border-blue-800 { border-color: var(--blue-800); }
.border-blue-900 { border-color: var(--blue-900); }
.border-blue-950 { border-color: var(--blue-950); }
.border-blue-darker { border-color: var(--blue-darker); }

.hover\:text-blue-50:hover { color: var(--blue-50); }
.hover\:text-blue-100:hover { color: var(--blue-100); }
.hover\:text-blue-200:hover { color: var(--blue-200); }
.hover\:text-blue-500:hover { color: var(--blue-500); }
.hover\:text-blue-600:hover { color: var(--blue-600); }
.hover\:text-blue-700:hover { color: var(--blue-700); }
.hover\:text-blue-800:hover { color: var(--blue-800); }
.hover\:text-blue-900:hover { color: var(--blue-900); }
.hover\:text-blue-950:hover { color: var(--blue-950); }

.hover\:bg-blue-50:hover { background-color: var(--blue-50); }
.hover\:bg-blue-100:hover { background-color: var(--blue-100); }
.hover\:bg-blue-200:hover { background-color: var(--blue-200); }
.hover\:bg-blue-500:hover { background-color: var(--blue-500); }
.hover\:bg-blue-600:hover { background-color: var(--blue-600); }
.hover\:bg-blue-700:hover { background-color: var(--blue-700); }
.hover\:bg-blue-800:hover { background-color: var(--blue-800); }
.hover\:bg-blue-900:hover { background-color: var(--blue-900); }
.hover\:bg-blue-950:hover { background-color: var(--blue-950); }

.active\:bg-blue-50:active { background-color: var(--blue-50); }
.active\:bg-blue-100:active { background-color: var(--blue-100); }
.active\:bg-blue-200:active { background-color: var(--blue-200); }
.active\:bg-blue-500:active { background-color: var(--blue-500); }
.active\:bg-blue-600:active { background-color: var(--blue-600); }
.active\:bg-blue-700:active { background-color: var(--blue-700); }
.active\:bg-blue-800:active { background-color: var(--blue-800); }
.active\:bg-blue-900:active { background-color: var(--blue-900); }
.active\:bg-blue-950:active { background-color: var(--blue-950); }

.fill-blue-50 { fill: var(--blue-50); }
.fill-blue-100 { fill: var(--blue-100); }
.fill-blue-200 { fill: var(--blue-200); }
.fill-blue-500 { fill: var(--blue-500); }
.fill-blue-600 { fill: var(--blue-600); }
.fill-blue-700 { fill: var(--blue-700); }
.fill-blue-800 { fill: var(--blue-800); }
.fill-blue-900 { fill: var(--blue-900); }
.fill-blue-950 { fill: var(--blue-950); }

/* ── Yellow utilities ── */

.text-yellow-50 { color: var(--yellow-50); }
.text-yellow-100 { color: var(--yellow-100); }
.text-yellow-200 { color: var(--yellow-200); }
.text-yellow-500 { color: var(--yellow-500); }
.text-yellow-600 { color: var(--yellow-600); }
.text-yellow-700 { color: var(--yellow-700); }
.text-yellow-800 { color: var(--yellow-800); }
.text-yellow-900 { color: var(--yellow-900); }
.text-yellow-950 { color: var(--yellow-950); }
.text-yellow-darker { color: var(--yellow-darker); }

.bg-yellow-50 { background-color: var(--yellow-50); }
.bg-yellow-100 { background-color: var(--yellow-100); }
.bg-yellow-200 { background-color: var(--yellow-200); }
.bg-yellow-500 { background-color: var(--yellow-500); }
.bg-yellow-600 { background-color: var(--yellow-600); }
.bg-yellow-700 { background-color: var(--yellow-700); }
.bg-yellow-800 { background-color: var(--yellow-800); }
.bg-yellow-900 { background-color: var(--yellow-900); }
.bg-yellow-950 { background-color: var(--yellow-950); }
.bg-yellow-darker { background-color: var(--yellow-darker); }

.border-yellow-50 { border-color: var(--yellow-50); }
.border-yellow-100 { border-color: var(--yellow-100); }
.border-yellow-200 { border-color: var(--yellow-200); }
.border-yellow-500 { border-color: var(--yellow-500); }
.border-yellow-600 { border-color: var(--yellow-600); }
.border-yellow-700 { border-color: var(--yellow-700); }
.border-yellow-800 { border-color: var(--yellow-800); }
.border-yellow-900 { border-color: var(--yellow-900); }
.border-yellow-950 { border-color: var(--yellow-950); }
.border-yellow-darker { border-color: var(--yellow-darker); }

.hover\:text-yellow-50:hover { color: var(--yellow-50); }
.hover\:text-yellow-100:hover { color: var(--yellow-100); }
.hover\:text-yellow-200:hover { color: var(--yellow-200); }
.hover\:text-yellow-500:hover { color: var(--yellow-500); }
.hover\:text-yellow-600:hover { color: var(--yellow-600); }
.hover\:text-yellow-700:hover { color: var(--yellow-700); }
.hover\:text-yellow-800:hover { color: var(--yellow-800); }
.hover\:text-yellow-900:hover { color: var(--yellow-900); }
.hover\:text-yellow-950:hover { color: var(--yellow-950); }

.hover\:bg-yellow-50:hover { background-color: var(--yellow-50); }
.hover\:bg-yellow-100:hover { background-color: var(--yellow-100); }
.hover\:bg-yellow-200:hover { background-color: var(--yellow-200); }
.hover\:bg-yellow-500:hover { background-color: var(--yellow-500); }
.hover\:bg-yellow-600:hover { background-color: var(--yellow-600); }
.hover\:bg-yellow-700:hover { background-color: var(--yellow-700); }
.hover\:bg-yellow-800:hover { background-color: var(--yellow-800); }
.hover\:bg-yellow-900:hover { background-color: var(--yellow-900); }
.hover\:bg-yellow-950:hover { background-color: var(--yellow-950); }

.active\:bg-yellow-50:active { background-color: var(--yellow-50); }
.active\:bg-yellow-100:active { background-color: var(--yellow-100); }
.active\:bg-yellow-200:active { background-color: var(--yellow-200); }
.active\:bg-yellow-500:active { background-color: var(--yellow-500); }
.active\:bg-yellow-600:active { background-color: var(--yellow-600); }
.active\:bg-yellow-700:active { background-color: var(--yellow-700); }
.active\:bg-yellow-800:active { background-color: var(--yellow-800); }
.active\:bg-yellow-900:active { background-color: var(--yellow-900); }
.active\:bg-yellow-950:active { background-color: var(--yellow-950); }

.fill-yellow-50 { fill: var(--yellow-50); }
.fill-yellow-100 { fill: var(--yellow-100); }
.fill-yellow-200 { fill: var(--yellow-200); }
.fill-yellow-500 { fill: var(--yellow-500); }
.fill-yellow-600 { fill: var(--yellow-600); }
.fill-yellow-700 { fill: var(--yellow-700); }
.fill-yellow-800 { fill: var(--yellow-800); }
.fill-yellow-900 { fill: var(--yellow-900); }
.fill-yellow-950 { fill: var(--yellow-950); }

/* ── Green utilities ── */

.text-green-50 { color: var(--green-50); }
.text-green-100 { color: var(--green-100); }
.text-green-200 { color: var(--green-200); }
.text-green-500 { color: var(--green-500); }
.text-green-600 { color: var(--green-600); }
.text-green-700 { color: var(--green-700); }
.text-green-800 { color: var(--green-800); }
.text-green-900 { color: var(--green-900); }
.text-green-950 { color: var(--green-950); }
.text-green-darker { color: var(--green-darker); }

.bg-green-50 { background-color: var(--green-50); }
.bg-green-100 { background-color: var(--green-100); }
.bg-green-200 { background-color: var(--green-200); }
.bg-green-500 { background-color: var(--green-500); }
.bg-green-600 { background-color: var(--green-600); }
.bg-green-700 { background-color: var(--green-700); }
.bg-green-800 { background-color: var(--green-800); }
.bg-green-900 { background-color: var(--green-900); }
.bg-green-950 { background-color: var(--green-950); }
.bg-green-darker { background-color: var(--green-darker); }

.border-green-50 { border-color: var(--green-50); }
.border-green-100 { border-color: var(--green-100); }
.border-green-200 { border-color: var(--green-200); }
.border-green-500 { border-color: var(--green-500); }
.border-green-600 { border-color: var(--green-600); }
.border-green-700 { border-color: var(--green-700); }
.border-green-800 { border-color: var(--green-800); }
.border-green-900 { border-color: var(--green-900); }
.border-green-950 { border-color: var(--green-950); }
.border-green-darker { border-color: var(--green-darker); }

.hover\:text-green-50:hover { color: var(--green-50); }
.hover\:text-green-100:hover { color: var(--green-100); }
.hover\:text-green-200:hover { color: var(--green-200); }
.hover\:text-green-500:hover { color: var(--green-500); }
.hover\:text-green-600:hover { color: var(--green-600); }
.hover\:text-green-700:hover { color: var(--green-700); }
.hover\:text-green-800:hover { color: var(--green-800); }
.hover\:text-green-900:hover { color: var(--green-900); }
.hover\:text-green-950:hover { color: var(--green-950); }

.hover\:bg-green-50:hover { background-color: var(--green-50); }
.hover\:bg-green-100:hover { background-color: var(--green-100); }
.hover\:bg-green-200:hover { background-color: var(--green-200); }
.hover\:bg-green-500:hover { background-color: var(--green-500); }
.hover\:bg-green-600:hover { background-color: var(--green-600); }
.hover\:bg-green-700:hover { background-color: var(--green-700); }
.hover\:bg-green-800:hover { background-color: var(--green-800); }
.hover\:bg-green-900:hover { background-color: var(--green-900); }
.hover\:bg-green-950:hover { background-color: var(--green-950); }

.active\:bg-green-50:active { background-color: var(--green-50); }
.active\:bg-green-100:active { background-color: var(--green-100); }
.active\:bg-green-200:active { background-color: var(--green-200); }
.active\:bg-green-500:active { background-color: var(--green-500); }
.active\:bg-green-600:active { background-color: var(--green-600); }
.active\:bg-green-700:active { background-color: var(--green-700); }
.active\:bg-green-800:active { background-color: var(--green-800); }
.active\:bg-green-900:active { background-color: var(--green-900); }
.active\:bg-green-950:active { background-color: var(--green-950); }

.fill-green-50 { fill: var(--green-50); }
.fill-green-100 { fill: var(--green-100); }
.fill-green-200 { fill: var(--green-200); }
.fill-green-500 { fill: var(--green-500); }
.fill-green-600 { fill: var(--green-600); }
.fill-green-700 { fill: var(--green-700); }
.fill-green-800 { fill: var(--green-800); }
.fill-green-900 { fill: var(--green-900); }
.fill-green-950 { fill: var(--green-950); }

/* ── Red utilities ── */

.text-red-50 { color: var(--red-50); }
.text-red-100 { color: var(--red-100); }
.text-red-200 { color: var(--red-200); }
.text-red-500 { color: var(--red-500); }
.text-red-600 { color: var(--red-600); }
.text-red-700 { color: var(--red-700); }
.text-red-800 { color: var(--red-800); }
.text-red-900 { color: var(--red-900); }
.text-red-950 { color: var(--red-950); }
.text-red-darker { color: var(--red-darker); }

.bg-red-50 { background-color: var(--red-50); }
.bg-red-100 { background-color: var(--red-100); }
.bg-red-200 { background-color: var(--red-200); }
.bg-red-500 { background-color: var(--red-500); }
.bg-red-600 { background-color: var(--red-600); }
.bg-red-700 { background-color: var(--red-700); }
.bg-red-800 { background-color: var(--red-800); }
.bg-red-900 { background-color: var(--red-900); }
.bg-red-950 { background-color: var(--red-950); }
.bg-red-darker { background-color: var(--red-darker); }

.border-red-50 { border-color: var(--red-50); }
.border-red-100 { border-color: var(--red-100); }
.border-red-200 { border-color: var(--red-200); }
.border-red-500 { border-color: var(--red-500); }
.border-red-600 { border-color: var(--red-600); }
.border-red-700 { border-color: var(--red-700); }
.border-red-800 { border-color: var(--red-800); }
.border-red-900 { border-color: var(--red-900); }
.border-red-950 { border-color: var(--red-950); }
.border-red-darker { border-color: var(--red-darker); }

.hover\:text-red-50:hover { color: var(--red-50); }
.hover\:text-red-100:hover { color: var(--red-100); }
.hover\:text-red-200:hover { color: var(--red-200); }
.hover\:text-red-500:hover { color: var(--red-500); }
.hover\:text-red-600:hover { color: var(--red-600); }
.hover\:text-red-700:hover { color: var(--red-700); }
.hover\:text-red-800:hover { color: var(--red-800); }
.hover\:text-red-900:hover { color: var(--red-900); }
.hover\:text-red-950:hover { color: var(--red-950); }

.hover\:bg-red-50:hover { background-color: var(--red-50); }
.hover\:bg-red-100:hover { background-color: var(--red-100); }
.hover\:bg-red-200:hover { background-color: var(--red-200); }
.hover\:bg-red-500:hover { background-color: var(--red-500); }
.hover\:bg-red-600:hover { background-color: var(--red-600); }
.hover\:bg-red-700:hover { background-color: var(--red-700); }
.hover\:bg-red-800:hover { background-color: var(--red-800); }
.hover\:bg-red-900:hover { background-color: var(--red-900); }
.hover\:bg-red-950:hover { background-color: var(--red-950); }

.active\:bg-red-50:active { background-color: var(--red-50); }
.active\:bg-red-100:active { background-color: var(--red-100); }
.active\:bg-red-200:active { background-color: var(--red-200); }
.active\:bg-red-500:active { background-color: var(--red-500); }
.active\:bg-red-600:active { background-color: var(--red-600); }
.active\:bg-red-700:active { background-color: var(--red-700); }
.active\:bg-red-800:active { background-color: var(--red-800); }
.active\:bg-red-900:active { background-color: var(--red-900); }
.active\:bg-red-950:active { background-color: var(--red-950); }

.fill-red-50 { fill: var(--red-50); }
.fill-red-100 { fill: var(--red-100); }
.fill-red-200 { fill: var(--red-200); }
.fill-red-500 { fill: var(--red-500); }
.fill-red-600 { fill: var(--red-600); }
.fill-red-700 { fill: var(--red-700); }
.fill-red-800 { fill: var(--red-800); }
.fill-red-900 { fill: var(--red-900); }
.fill-red-950 { fill: var(--red-950); }