/* =========================================================
   Rewaq — Theme color presets
   Defines brand-* color CSS variables for multiple presets.
   The Tailwind config in _head.html consumes these via
   rgb(var(--brand-500) / <alpha-value>).
   ========================================================= */

:root,
[data-color="indigo"] {
  --brand-50:  238 242 255;
  --brand-100: 224 231 255;
  --brand-200: 199 210 254;
  --brand-300: 165 180 252;
  --brand-400: 129 140 248;
  --brand-500: 99 102 241;
  --brand-600: 79 70 229;
  --brand-700: 67 56 202;
  --brand-800: 55 48 163;
  --brand-900: 49 46 129;
  --brand-rgb: 99 102 241;
}

[data-color="violet"] {
  --brand-50:  245 243 255;
  --brand-100: 237 233 254;
  --brand-200: 221 214 254;
  --brand-300: 196 181 253;
  --brand-400: 167 139 250;
  --brand-500: 139 92 246;
  --brand-600: 124 58 237;
  --brand-700: 109 40 217;
  --brand-800: 91 33 182;
  --brand-900: 76 29 149;
  --brand-rgb: 139 92 246;
}

[data-color="emerald"] {
  --brand-50:  236 253 245;
  --brand-100: 209 250 229;
  --brand-200: 167 243 208;
  --brand-300: 110 231 183;
  --brand-400: 52 211 153;
  --brand-500: 16 185 129;
  --brand-600: 5 150 105;
  --brand-700: 4 120 87;
  --brand-800: 6 95 70;
  --brand-900: 6 78 59;
  --brand-rgb: 16 185 129;
}

[data-color="rose"] {
  --brand-50:  255 241 242;
  --brand-100: 255 228 230;
  --brand-200: 254 205 211;
  --brand-300: 253 164 175;
  --brand-400: 251 113 133;
  --brand-500: 244 63 94;
  --brand-600: 225 29 72;
  --brand-700: 190 18 60;
  --brand-800: 159 18 57;
  --brand-900: 136 19 55;
  --brand-rgb: 244 63 94;
}

[data-color="amber"] {
  --brand-50:  255 251 235;
  --brand-100: 254 243 199;
  --brand-200: 253 230 138;
  --brand-300: 252 211 77;
  --brand-400: 251 191 36;
  --brand-500: 245 158 11;
  --brand-600: 217 119 6;
  --brand-700: 180 83 9;
  --brand-800: 146 64 14;
  --brand-900: 120 53 15;
  --brand-rgb: 245 158 11;
}

[data-color="cyan"] {
  --brand-50:  236 254 255;
  --brand-100: 207 250 254;
  --brand-200: 165 243 252;
  --brand-300: 103 232 249;
  --brand-400: 34 211 238;
  --brand-500: 6 182 212;
  --brand-600: 8 145 178;
  --brand-700: 14 116 144;
  --brand-800: 21 94 117;
  --brand-900: 22 78 99;
  --brand-rgb: 6 182 212;
}

[data-color="fuchsia"] {
  --brand-50:  253 244 255;
  --brand-100: 250 232 255;
  --brand-200: 245 208 254;
  --brand-300: 240 171 252;
  --brand-400: 232 121 249;
  --brand-500: 217 70 239;
  --brand-600: 192 38 211;
  --brand-700: 162 28 175;
  --brand-800: 134 25 143;
  --brand-900: 112 26 117;
  --brand-rgb: 217 70 239;
}

[data-color="slate"] {
  --brand-50:  248 250 252;
  --brand-100: 241 245 249;
  --brand-200: 226 232 240;
  --brand-300: 203 213 225;
  --brand-400: 148 163 184;
  --brand-500: 100 116 139;
  --brand-600: 71 85 105;
  --brand-700: 51 65 85;
  --brand-800: 30 41 59;
  --brand-900: 15 23 42;
  --brand-rgb: 71 85 105;
}

/* Update theme-color meta dynamically via JS too */