/*
  Project Color Palette
  Usage examples:
    color: var(--color-green-500);
    background: rgb(var(--color-green-500-rgb) / 12%);
    <div class="bg-green-500 text-neutral-1 border-green-600"></div>

  Note: neutral-1 in the provided guide shows #F5F5F5, but its RGB label appears inconsistent.
  This file uses the HEX value as the source of truth and keeps RGB variables consistent with HEX.
*/

:root {
  /* Green */
  --color-green-50: #e6f6ee;
  --color-green-50-rgb: 230 246 238;
  --color-green-100: #b2e2c9;
  --color-green-100-rgb: 178 226 201;
  --color-green-200: #8dd4af;
  --color-green-200-rgb: 141 212 175;
  --color-green-300: #59c08b;
  --color-green-300-rgb: 89 192 139;
  --color-green-400: #39b475;
  --color-green-400-rgb: 57 180 117;
  --color-green-500: #07a152;
  --color-green-500-rgb: 7 161 82;
  --color-green-600: #06934b;
  --color-green-600-rgb: 6 147 75;
  --color-green-700: #05723a;
  --color-green-700-rgb: 5 114 58;
  --color-green-800: #04592d;
  --color-green-800-rgb: 4 89 45;
  --color-green-900: #034422;
  --color-green-900-rgb: 3 68 34;

  /* Violet */
  --color-violet-50: #ece7ef;
  --color-violet-50-rgb: 236 231 239;
  --color-violet-100: #c5b4ce;
  --color-violet-100-rgb: 197 180 206;
  --color-violet-200: #a990b7;
  --color-violet-200-rgb: 169 144 183;
  --color-violet-300: #825e96;
  --color-violet-300-rgb: 130 94 150;
  --color-violet-400: #695081;
  --color-violet-400-rgb: 105 80 129;
  --color-violet-500: #432461;
  --color-violet-500-rgb: 67 36 97;
  --color-violet-600: #3e0d59;
  --color-violet-600-rgb: 62 13 89;
  --color-violet-700: #301A45;
  --color-violet-700-rgb: 48 26 69;
  --color-violet-800: #251435;
  --color-violet-800-rgb: 37 20 53;
  --color-violet-900: #1d0629;
  --color-violet-900-rgb: 29 6 41;

  /* Neutral */
  --color-neutral-1: #f5f5f5;
  --color-neutral-1-rgb: 245 245 245;
  --color-neutral-2: #ededed;
  --color-neutral-2-rgb: 249 246 247;
  --color-neutral-3: #e3e2e1;
  --color-neutral-3-rgb: 242 244 247;
  --color-neutral-4: #dfdfdf;
  --color-neutral-4-rgb: 234 236 240;
  --color-neutral-5: #cbcbcb;
  --color-neutral-5-rgb: 208 213 221;
  --color-neutral-6: #b1b1b1;
  --color-neutral-6-rgb: 152 169 172;
  --color-neutral-7: #868686;
  --color-neutral-7-rgb: 102 112 133;
  --color-neutral-8: #757575;
  --color-neutral-8-rgb: 71 84 103;
  --color-neutral-9: #606060;
  --color-neutral-9-rgb: 52 64 84;
  --color-neutral-10: #404040;
  --color-neutral-10-rgb: 29 41 57;
  --color-neutral-11: #0c0c0c;
  --color-neutral-11-rgb: 16 24 40;

  /* Warning */
  --color-warning-300: #fed954;
  --color-warning-300-rgb: 254 217 84;
  --color-warning-500: #fdc600;
  --color-warning-500-rgb: 253 198 0;
  --color-warning-700: #b48d00;
  --color-warning-700-rgb: 180 141 0;

  /* Success */
  --color-success-300: #98d96f;
  --color-success-300-rgb: 152 217 111;
  --color-success-500: #65c728;
  --color-success-500-rgb: 101 199 40;
  --color-success-700: #488d1c;
  --color-success-700-rgb: 72 141 28;

  /* Error */
  --color-error-300: #f76060;
  --color-error-300-rgb: 247 96 96;
  --color-error-500: #f31212;
  --color-error-500-rgb: 243 18 18;
  --color-error-700: #ad0d0d;
  --color-error-700-rgb: 173 13 13;

  /* Info */
  --color-info-300: #5496ff;
  --color-info-300-rgb: 84 150 255;
  --color-info-500: #0063ff;
  --color-info-500-rgb: 0 99 255;
  --color-info-700: #0046b5;
  --color-info-700-rgb: 0 70 181;

  /* Semantic aliases */
  --color-primary: var(--color-green-500);
  --color-primary-hover: var(--color-green-600);
  --color-primary-active: var(--color-green-700);
  --color-primary-soft: var(--color-green-50);
  --color-primary-rgb: var(--color-green-500-rgb);

  --color-secondary: var(--color-violet-500);
  --color-secondary-hover: var(--color-violet-600);
  --color-secondary-active: var(--color-violet-700);
  --color-secondary-soft: var(--color-violet-50);
  --color-secondary-rgb: var(--color-violet-500-rgb);

  --color-success: var(--color-success-500);
  --color-success-hover: var(--color-success-700);
  --color-success-soft: var(--color-success-300);
  --color-success-rgb: var(--color-success-500-rgb);

  --color-warning: var(--color-warning-500);
  --color-warning-hover: var(--color-warning-700);
  --color-warning-soft: var(--color-warning-300);
  --color-warning-rgb: var(--color-warning-500-rgb);

  --color-error: var(--color-error-500);
  --color-error-hover: var(--color-error-700);
  --color-error-soft: var(--color-error-300);
  --color-error-rgb: var(--color-error-500-rgb);

  --color-info: var(--color-info-500);
  --color-info-hover: var(--color-info-700);
  --color-info-soft: var(--color-info-300);
  --color-info-rgb: var(--color-info-500-rgb);

  --color-body-bg: #ffffff;
  --color-surface: var(--color-neutral-1);
  --color-surface-muted: var(--color-neutral-2);
  --color-border: var(--color-neutral-4);
  --color-border-strong: var(--color-neutral-6);
  --color-text: var(--color-neutral-11);
  --color-text-muted: var(--color-neutral-8);
  --color-text-subtle: var(--color-neutral-7);
  --color-white: #ffffff;
  --color-transparent: #FFFFFF00;
  --color-black: #000000;
}

/* Base helpers */
.color-primary,
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }

.color-secondary,
.text-secondary { color: var(--color-secondary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

.color-success,
.text-success { color: var(--color-success) !important; }
.bg-success { background-color: var(--color-success) !important; }
.border-success { border-color: var(--color-success) !important; }

.color-warning,
.text-warning { color: var(--color-warning) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.border-warning { border-color: var(--color-warning) !important; }

.color-error,
.text-error { color: var(--color-error) !important; }
.bg-error { background-color: var(--color-error) !important; }
.border-error { border-color: var(--color-error) !important; }

.color-info,
.text-info { color: var(--color-info) !important; }
.bg-info { background-color: var(--color-info) !important; }
.border-info { border-color: var(--color-info) !important; }

.text-body { color: var(--color-text) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-subtle { color: var(--color-text-subtle) !important; }
.bg-body { background-color: var(--color-neutral-1) !important; }
.bg-surface { background-color: var(--color-surface) !important; }
.bg-surface-muted { background-color: var(--color-surface-muted) !important; }
.border-default { border-color: var(--color-border) !important; }
.border-strong { border-color: var(--color-border-strong) !important; }
.text-white { color: var(--color-white) !important; }
.text-black { color: var(--color-black) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-black { background-color: var(--color-black) !important; }

/* Green utilities */
.text-green-50, .color-green-50 { color: var(--color-green-50) !important; }
.bg-green-50 { background-color: var(--color-green-50) !important; }
.border-green-50 { border-color: var(--color-green-50) !important; }
.fill-green-50 { fill: var(--color-green-50) !important; }
.stroke-green-50 { stroke: var(--color-green-50) !important; }

.text-green-100, .color-green-100 { color: var(--color-green-100) !important; }
.bg-green-100 { background-color: var(--color-green-100) !important; }
.border-green-100 { border-color: var(--color-green-100) !important; }
.fill-green-100 { fill: var(--color-green-100) !important; }
.stroke-green-100 { stroke: var(--color-green-100) !important; }

.text-green-200, .color-green-200 { color: var(--color-green-200) !important; }
.bg-green-200 { background-color: var(--color-green-200) !important; }
.border-green-200 { border-color: var(--color-green-200) !important; }
.fill-green-200 { fill: var(--color-green-200) !important; }
.stroke-green-200 { stroke: var(--color-green-200) !important; }

.text-green-300, .color-green-300 { color: var(--color-green-300) !important; }
.bg-green-300 { background-color: var(--color-green-300) !important; }
.border-green-300 { border-color: var(--color-green-300) !important; }
.fill-green-300 { fill: var(--color-green-300) !important; }
.stroke-green-300 { stroke: var(--color-green-300) !important; }

.text-green-400, .color-green-400 { color: var(--color-green-400) !important; }
.bg-green-400 { background-color: var(--color-green-400) !important; }
.border-green-400 { border-color: var(--color-green-400) !important; }
.fill-green-400 { fill: var(--color-green-400) !important; }
.stroke-green-400 { stroke: var(--color-green-400) !important; }

.text-green-500, .color-green-500 { color: var(--color-green-500) !important; }
.bg-green-500 { background-color: var(--color-green-500) !important; }
.border-green-500 { border-color: var(--color-green-500) !important; }
.fill-green-500 { fill: var(--color-green-500) !important; }
.stroke-green-500 { stroke: var(--color-green-500) !important; }

.text-green-600, .color-green-600 { color: var(--color-green-600) !important; }
.bg-green-600 { background-color: var(--color-green-600) !important; }
.border-green-600 { border-color: var(--color-green-600) !important; }
.fill-green-600 { fill: var(--color-green-600) !important; }
.stroke-green-600 { stroke: var(--color-green-600) !important; }

.text-green-700, .color-green-700 { color: var(--color-green-700) !important; }
.bg-green-700 { background-color: var(--color-green-700) !important; }
.border-green-700 { border-color: var(--color-green-700) !important; }
.fill-green-700 { fill: var(--color-green-700) !important; }
.stroke-green-700 { stroke: var(--color-green-700) !important; }

.text-green-800, .color-green-800 { color: var(--color-green-800) !important; }
.bg-green-800 { background-color: var(--color-green-800) !important; }
.border-green-800 { border-color: var(--color-green-800) !important; }
.fill-green-800 { fill: var(--color-green-800) !important; }
.stroke-green-800 { stroke: var(--color-green-800) !important; }

.text-green-900, .color-green-900 { color: var(--color-green-900) !important; }
.bg-green-900 { background-color: var(--color-green-900) !important; }
.border-green-900 { border-color: var(--color-green-900) !important; }
.fill-green-900 { fill: var(--color-green-900) !important; }
.stroke-green-900 { stroke: var(--color-green-900) !important; }

/* Violet utilities */
.text-violet-50, .color-violet-50 { color: var(--color-violet-50) !important; }
.bg-violet-50 { background-color: var(--color-violet-50) !important; }
.border-violet-50 { border-color: var(--color-violet-50) !important; }
.fill-violet-50 { fill: var(--color-violet-50) !important; }
.stroke-violet-50 { stroke: var(--color-violet-50) !important; }

.text-violet-100, .color-violet-100 { color: var(--color-violet-100) !important; }
.bg-violet-100 { background-color: var(--color-violet-100) !important; }
.border-violet-100 { border-color: var(--color-violet-100) !important; }
.fill-violet-100 { fill: var(--color-violet-100) !important; }
.stroke-violet-100 { stroke: var(--color-violet-100) !important; }

.text-violet-200, .color-violet-200 { color: var(--color-violet-200) !important; }
.bg-violet-200 { background-color: var(--color-violet-200) !important; }
.border-violet-200 { border-color: var(--color-violet-200) !important; }
.fill-violet-200 { fill: var(--color-violet-200) !important; }
.stroke-violet-200 { stroke: var(--color-violet-200) !important; }

.text-violet-300, .color-violet-300 { color: var(--color-violet-300) !important; }
.bg-violet-300 { background-color: var(--color-violet-300) !important; }
.border-violet-300 { border-color: var(--color-violet-300) !important; }
.fill-violet-300 { fill: var(--color-violet-300) !important; }
.stroke-violet-300 { stroke: var(--color-violet-300) !important; }

.text-violet-400, .color-violet-400 { color: var(--color-violet-400) !important; }
.bg-violet-400 { background-color: var(--color-violet-400) !important; }
.border-violet-400 { border-color: var(--color-violet-400) !important; }
.fill-violet-400 { fill: var(--color-violet-400) !important; }
.stroke-violet-400 { stroke: var(--color-violet-400) !important; }

.text-violet-500, .color-violet-500 { color: var(--color-violet-500) !important; }
.bg-violet-500 { background-color: var(--color-violet-500) !important; }
.border-violet-500 { border-color: var(--color-violet-500) !important; }
.fill-violet-500 { fill: var(--color-violet-500) !important; }
.stroke-violet-500 { stroke: var(--color-violet-500) !important; }

.text-violet-600, .color-violet-600 { color: var(--color-violet-600) !important; }
.bg-violet-600 { background-color: var(--color-violet-600) !important; }
.border-violet-600 { border-color: var(--color-violet-600) !important; }
.fill-violet-600 { fill: var(--color-violet-600) !important; }
.stroke-violet-600 { stroke: var(--color-violet-600) !important; }

.text-violet-700, .color-violet-700 { color: var(--color-violet-700) !important; }
.bg-violet-700 { background-color: var(--color-violet-700) !important; }
.border-violet-700 { border-color: var(--color-violet-700) !important; }
.fill-violet-700 { fill: var(--color-violet-700) !important; }
.stroke-violet-700 { stroke: var(--color-violet-700) !important; }

.text-violet-800, .color-violet-800 { color: var(--color-violet-800) !important; }
.bg-violet-800 { background-color: var(--color-violet-800) !important; }
.border-violet-800 { border-color: var(--color-violet-800) !important; }
.fill-violet-800 { fill: var(--color-violet-800) !important; }
.stroke-violet-800 { stroke: var(--color-violet-800) !important; }

.text-violet-900, .color-violet-900 { color: var(--color-violet-900) !important; }
.bg-violet-900 { background-color: var(--color-violet-900) !important; }
.border-violet-900 { border-color: var(--color-violet-900) !important; }
.fill-violet-900 { fill: var(--color-violet-900) !important; }
.stroke-violet-900 { stroke: var(--color-violet-900) !important; }

/* Neutral utilities */
.text-neutral-1, .color-neutral-1 { color: var(--color-neutral-1) !important; }
.bg-neutral-1 { background-color: var(--color-neutral-1) !important; }
.border-neutral-1 { border-color: var(--color-neutral-1) !important; }
.fill-neutral-1 { fill: var(--color-neutral-1) !important; }
.stroke-neutral-1 { stroke: var(--color-neutral-1) !important; }

.text-neutral-2, .color-neutral-2 { color: var(--color-neutral-2) !important; }
.bg-neutral-2 { background-color: var(--color-neutral-2) !important; }
.border-neutral-2 { border-color: var(--color-neutral-2) !important; }
.fill-neutral-2 { fill: var(--color-neutral-2) !important; }
.stroke-neutral-2 { stroke: var(--color-neutral-2) !important; }

.text-neutral-3, .color-neutral-3 { color: var(--color-neutral-3) !important; }
.bg-neutral-3 { background-color: var(--color-neutral-3) !important; }
.border-neutral-3 { border-color: var(--color-neutral-3) !important; }
.fill-neutral-3 { fill: var(--color-neutral-3) !important; }
.stroke-neutral-3 { stroke: var(--color-neutral-3) !important; }

.text-neutral-4, .color-neutral-4 { color: var(--color-neutral-4) !important; }
.bg-neutral-4 { background-color: var(--color-neutral-4) !important; }
.border-neutral-4 { border-color: var(--color-neutral-4) !important; }
.fill-neutral-4 { fill: var(--color-neutral-4) !important; }
.stroke-neutral-4 { stroke: var(--color-neutral-4) !important; }

.text-neutral-5, .color-neutral-5 { color: var(--color-neutral-5) !important; }
.bg-neutral-5 { background-color: var(--color-neutral-5) !important; }
.border-neutral-5 { border-color: var(--color-neutral-5) !important; }
.fill-neutral-5 { fill: var(--color-neutral-5) !important; }
.stroke-neutral-5 { stroke: var(--color-neutral-5) !important; }

.text-neutral-6, .color-neutral-6 { color: var(--color-neutral-6) !important; }
.bg-neutral-6 { background-color: var(--color-neutral-6) !important; }
.border-neutral-6 { border-color: var(--color-neutral-6) !important; }
.fill-neutral-6 { fill: var(--color-neutral-6) !important; }
.stroke-neutral-6 { stroke: var(--color-neutral-6) !important; }

.text-neutral-7, .color-neutral-7 { color: var(--color-neutral-7) !important; }
.bg-neutral-7 { background-color: var(--color-neutral-7) !important; }
.border-neutral-7 { border-color: var(--color-neutral-7) !important; }
.fill-neutral-7 { fill: var(--color-neutral-7) !important; }
.stroke-neutral-7 { stroke: var(--color-neutral-7) !important; }

.text-neutral-8, .color-neutral-8 { color: var(--color-neutral-8) !important; }
.bg-neutral-8 { background-color: var(--color-neutral-8) !important; }
.border-neutral-8 { border-color: var(--color-neutral-8) !important; }
.fill-neutral-8 { fill: var(--color-neutral-8) !important; }
.stroke-neutral-8 { stroke: var(--color-neutral-8) !important; }

.text-neutral-9, .color-neutral-9 { color: var(--color-neutral-9) !important; }
.bg-neutral-9 { background-color: var(--color-neutral-9) !important; }
.border-neutral-9 { border-color: var(--color-neutral-9) !important; }
.fill-neutral-9 { fill: var(--color-neutral-9) !important; }
.stroke-neutral-9 { stroke: var(--color-neutral-9) !important; }

.text-neutral-10, .color-neutral-10 { color: var(--color-neutral-10) !important; }
.bg-neutral-10 { background-color: var(--color-neutral-10) !important; }
.border-neutral-10 { border-color: var(--color-neutral-10) !important; }
.fill-neutral-10 { fill: var(--color-neutral-10) !important; }
.stroke-neutral-10 { stroke: var(--color-neutral-10) !important; }

.text-neutral-11, .color-neutral-11 { color: var(--color-neutral-11) !important; }
.bg-neutral-11 { background-color: var(--color-neutral-11) !important; }
.border-neutral-11 { border-color: var(--color-neutral-11) !important; }
.fill-neutral-11 { fill: var(--color-neutral-11) !important; }
.stroke-neutral-11 { stroke: var(--color-neutral-11) !important; }

/* Warning utilities */
.text-warning-300, .color-warning-300 { color: var(--color-warning-300) !important; }
.bg-warning-300 { background-color: var(--color-warning-300) !important; }
.border-warning-300 { border-color: var(--color-warning-300) !important; }
.fill-warning-300 { fill: var(--color-warning-300) !important; }
.stroke-warning-300 { stroke: var(--color-warning-300) !important; }

.text-warning-500, .color-warning-500 { color: var(--color-warning-500) !important; }
.bg-warning-500 { background-color: var(--color-warning-500) !important; }
.border-warning-500 { border-color: var(--color-warning-500) !important; }
.fill-warning-500 { fill: var(--color-warning-500) !important; }
.stroke-warning-500 { stroke: var(--color-warning-500) !important; }

.text-warning-700, .color-warning-700 { color: var(--color-warning-700) !important; }
.bg-warning-700 { background-color: var(--color-warning-700) !important; }
.border-warning-700 { border-color: var(--color-warning-700) !important; }
.fill-warning-700 { fill: var(--color-warning-700) !important; }
.stroke-warning-700 { stroke: var(--color-warning-700) !important; }

/* Success utilities */
.text-success-300, .color-success-300 { color: var(--color-success-300) !important; }
.bg-success-300 { background-color: var(--color-success-300) !important; }
.border-success-300 { border-color: var(--color-success-300) !important; }
.fill-success-300 { fill: var(--color-success-300) !important; }
.stroke-success-300 { stroke: var(--color-success-300) !important; }

.text-success-500, .color-success-500 { color: var(--color-success-500) !important; }
.bg-success-500 { background-color: var(--color-success-500) !important; }
.border-success-500 { border-color: var(--color-success-500) !important; }
.fill-success-500 { fill: var(--color-success-500) !important; }
.stroke-success-500 { stroke: var(--color-success-500) !important; }

.text-success-700, .color-success-700 { color: var(--color-success-700) !important; }
.bg-success-700 { background-color: var(--color-success-700) !important; }
.border-success-700 { border-color: var(--color-success-700) !important; }
.fill-success-700 { fill: var(--color-success-700) !important; }
.stroke-success-700 { stroke: var(--color-success-700) !important; }

/* Error utilities */
.text-error-300, .color-error-300 { color: var(--color-error-300) !important; }
.bg-error-300 { background-color: var(--color-error-300) !important; }
.border-error-300 { border-color: var(--color-error-300) !important; }
.fill-error-300 { fill: var(--color-error-300) !important; }
.stroke-error-300 { stroke: var(--color-error-300) !important; }

.text-error-500, .color-error-500 { color: var(--color-error-500) !important; }
.bg-error-500 { background-color: var(--color-error-500) !important; }
.border-error-500 { border-color: var(--color-error-500) !important; }
.fill-error-500 { fill: var(--color-error-500) !important; }
.stroke-error-500 { stroke: var(--color-error-500) !important; }

.text-error-700, .color-error-700 { color: var(--color-error-700) !important; }
.bg-error-700 { background-color: var(--color-error-700) !important; }
.border-error-700 { border-color: var(--color-error-700) !important; }
.fill-error-700 { fill: var(--color-error-700) !important; }
.stroke-error-700 { stroke: var(--color-error-700) !important; }

/* Info utilities */
.text-info-300, .color-info-300 { color: var(--color-info-300) !important; }
.bg-info-300 { background-color: var(--color-info-300) !important; }
.border-info-300 { border-color: var(--color-info-300) !important; }
.fill-info-300 { fill: var(--color-info-300) !important; }
.stroke-info-300 { stroke: var(--color-info-300) !important; }

.text-info-500, .color-info-500 { color: var(--color-info-500) !important; }
.bg-info-500 { background-color: var(--color-info-500) !important; }
.border-info-500 { border-color: var(--color-info-500) !important; }
.fill-info-500 { fill: var(--color-info-500) !important; }
.stroke-info-500 { stroke: var(--color-info-500) !important; }

.text-info-700, .color-info-700 { color: var(--color-info-700) !important; }
.bg-info-700 { background-color: var(--color-info-700) !important; }
.border-info-700 { border-color: var(--color-info-700) !important; }
.fill-info-700 { fill: var(--color-info-700) !important; }
.stroke-info-700 { stroke: var(--color-info-700) !important; }