/**
 * CinevoPK accent palettes.
 *
 * RGB channels (no commas) so Tailwind `brand-*` utilities keep opacity
 * modifiers: bg-brand-600, bg-brand-500/10, shadow-brand-600/25, etc.
 *
 * Toggle with html[data-palette="violet|gold|cyan"] (see palette switcher).
 * Share a preview: /?palette=gold
 */

:root,
html[data-palette="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-950: 46 16 101;
}

html[data-palette="gold"] {
  --brand-50: 255 248 230;
  --brand-100: 254 236 191;
  --brand-200: 252 214 122;
  --brand-300: 245 185 56;
  --brand-400: 226 160 28;
  --brand-500: 196 125 16;
  --brand-600: 154 90 12;
  --brand-700: 122 70 12;
  --brand-800: 92 52 14;
  --brand-900: 66 38 14;
  --brand-950: 38 22 8;
}

html[data-palette="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: 8 145 178;
  --brand-600: 14 116 144;
  --brand-700: 21 94 117;
  --brand-800: 22 78 99;
  --brand-900: 12 58 74;
  --brand-950: 8 51 68;
}

:root {
  --ui-primary: rgb(var(--brand-600));
  --ui-primary-hover: rgb(var(--brand-700));
  --ui-primary-foreground: #ffffff;
  --ui-primary-soft: rgb(var(--brand-50));
  --ui-primary-text: rgb(var(--brand-700));
  --ui-primary-ring: rgb(var(--brand-500) / 0.35);
}

html.dark {
  --ui-primary-soft: rgb(var(--brand-950) / 0.45);
  --ui-primary-text: rgb(var(--brand-300));
}

.btn-brand {
  background-color: var(--ui-primary);
  color: var(--ui-primary-foreground);
}

.btn-brand:hover {
  background-color: var(--ui-primary-hover);
}

.shadow-brand-lift:hover {
  box-shadow: 0 24px 60px -26px rgb(var(--brand-600) / 0.22);
}

[data-palette-option][aria-pressed="true"] {
  background-color: rgb(var(--brand-50));
}

html.dark [data-palette-option][aria-pressed="true"] {
  background-color: rgb(var(--brand-950) / 0.45);
}