/* Palette swatch preview colors (always these values regardless of active palette) */
:root {
  --palette-green: oklch(65% 0.18 142);
  --palette-blue: oklch(59% 0.24 264);
  --palette-indigo: oklch(52% 0.22 275);
  --palette-violet: oklch(50% 0.26 300);
  --palette-pink: oklch(60% 0.22 350);
  --palette-rose: oklch(58% 0.22 15);
  --palette-orange: oklch(65% 0.20 50);
  --palette-teal: oklch(62% 0.14 185);
  --palette-cyan: oklch(60% 0.18 230);
  --palette-amber: oklch(75% 0.17 80);
  --palette-red: oklch(55% 0.23 28);
  --palette-slate: oklch(53% 0.12 277);
}

/* ============================================================================
   Color palette definitions
   Green is the default (defined in colors.css and base.css).
   Each non-green color overrides primary-related tokens for light and dark.

   Selectors use html[data-color="X"][data-color] (doubled attribute) to raise
   specificity above theme-override.css and base.css selectors like
   html[data-theme="light"] that would otherwise reset colors to green.
   ============================================================================ */

/* --- Blue (Apple #007AFF, hue 264) --- */

html[data-color="blue"][data-color] {
  --lch-primary: 59% 0.24 264;
  --lch-accent: 59% 0.18 264;
  --lch-accent-light: 93% 0.04 264;
  --lch-accent-dark: 72% 0.12 264;
  --accent: oklch(59% 0.15 264);
  --accent-soft: oklch(93% 0.04 264);
  --accent-hover: oklch(52% 0.16 264);
  --accent-strong: oklch(45% 0.18 264);
  --msg-me: oklch(55% 0.14 264);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 264);
}

@media (prefers-color-scheme: dark) { html[data-color="blue"][data-color]:not([data-theme="light"]) {
  --lch-primary: 72% 0.18 264;
  --lch-accent: 72% 0.14 264;
  --lch-accent-light: 28% 0.05 264;
  --lch-accent-dark: 42% 0.08 264;
  --accent: oklch(72% 0.12 264);
  --accent-soft: oklch(20% 0.05 264);
  --accent-hover: oklch(78% 0.11 264);
  --accent-strong: oklch(65% 0.14 264);
  --msg-me: oklch(42% 0.10 264);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 264);
}}

html[data-color="blue"][data-theme="dark"] {
  --lch-primary: 72% 0.18 264;
  --lch-accent: 72% 0.14 264;
  --lch-accent-light: 28% 0.05 264;
  --lch-accent-dark: 42% 0.08 264;
  --accent: oklch(72% 0.12 264);
  --accent-soft: oklch(20% 0.05 264);
  --accent-hover: oklch(78% 0.11 264);
  --accent-strong: oklch(65% 0.14 264);
  --msg-me: oklch(42% 0.10 264);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 264);
}

/* --- Indigo (Discord #5865F2, hue 275) --- */

html[data-color="indigo"][data-color] {
  --lch-primary: 52% 0.22 275;
  --lch-accent: 52% 0.16 275;
  --lch-accent-light: 93% 0.04 275;
  --lch-accent-dark: 72% 0.12 275;
  --accent: oklch(52% 0.13 275);
  --accent-soft: oklch(93% 0.04 275);
  --accent-hover: oklch(45% 0.14 275);
  --accent-strong: oklch(38% 0.16 275);
  --msg-me: oklch(48% 0.12 275);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 275);
}

@media (prefers-color-scheme: dark) { html[data-color="indigo"][data-color]:not([data-theme="light"]) {
  --lch-primary: 68% 0.16 275;
  --lch-accent: 68% 0.12 275;
  --lch-accent-light: 28% 0.05 275;
  --lch-accent-dark: 42% 0.08 275;
  --accent: oklch(68% 0.10 275);
  --accent-soft: oklch(20% 0.05 275);
  --accent-hover: oklch(74% 0.09 275);
  --accent-strong: oklch(61% 0.12 275);
  --msg-me: oklch(38% 0.08 275);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 275);
}}

html[data-color="indigo"][data-theme="dark"] {
  --lch-primary: 68% 0.16 275;
  --lch-accent: 68% 0.12 275;
  --lch-accent-light: 28% 0.05 275;
  --lch-accent-dark: 42% 0.08 275;
  --accent: oklch(68% 0.10 275);
  --accent-soft: oklch(20% 0.05 275);
  --accent-hover: oklch(74% 0.09 275);
  --accent-strong: oklch(61% 0.12 275);
  --msg-me: oklch(38% 0.08 275);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 275);
}

/* --- Violet (Nubank #820AD1, hue 300) --- */

html[data-color="violet"][data-color] {
  --lch-primary: 50% 0.26 300;
  --lch-accent: 50% 0.20 300;
  --lch-accent-light: 93% 0.04 300;
  --lch-accent-dark: 72% 0.12 300;
  --accent: oklch(50% 0.17 300);
  --accent-soft: oklch(93% 0.04 300);
  --accent-hover: oklch(43% 0.18 300);
  --accent-strong: oklch(36% 0.20 300);
  --msg-me: oklch(46% 0.16 300);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 300);
}

@media (prefers-color-scheme: dark) { html[data-color="violet"][data-color]:not([data-theme="light"]) {
  --lch-primary: 66% 0.20 300;
  --lch-accent: 66% 0.16 300;
  --lch-accent-light: 28% 0.05 300;
  --lch-accent-dark: 42% 0.08 300;
  --accent: oklch(66% 0.14 300);
  --accent-soft: oklch(20% 0.05 300);
  --accent-hover: oklch(72% 0.13 300);
  --accent-strong: oklch(59% 0.16 300);
  --msg-me: oklch(36% 0.10 300);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 300);
}}

html[data-color="violet"][data-theme="dark"] {
  --lch-primary: 66% 0.20 300;
  --lch-accent: 66% 0.16 300;
  --lch-accent-light: 28% 0.05 300;
  --lch-accent-dark: 42% 0.08 300;
  --accent: oklch(66% 0.14 300);
  --accent-soft: oklch(20% 0.05 300);
  --accent-hover: oklch(72% 0.13 300);
  --accent-strong: oklch(59% 0.16 300);
  --msg-me: oklch(36% 0.10 300);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 300);
}

/* --- Pink (Dribbble #EA4C89, hue 350) --- */

html[data-color="pink"][data-color] {
  --lch-primary: 60% 0.22 350;
  --lch-accent: 60% 0.16 350;
  --lch-accent-light: 93% 0.04 350;
  --lch-accent-dark: 72% 0.12 350;
  --accent: oklch(60% 0.13 350);
  --accent-soft: oklch(93% 0.04 350);
  --accent-hover: oklch(53% 0.14 350);
  --accent-strong: oklch(46% 0.16 350);
  --msg-me: oklch(56% 0.12 350);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 350);
}

@media (prefers-color-scheme: dark) { html[data-color="pink"][data-color]:not([data-theme="light"]) {
  --lch-primary: 74% 0.16 350;
  --lch-accent: 74% 0.12 350;
  --lch-accent-light: 28% 0.05 350;
  --lch-accent-dark: 42% 0.08 350;
  --accent: oklch(74% 0.10 350);
  --accent-soft: oklch(20% 0.05 350);
  --accent-hover: oklch(80% 0.09 350);
  --accent-strong: oklch(67% 0.12 350);
  --msg-me: oklch(44% 0.08 350);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 350);
}}

html[data-color="pink"][data-theme="dark"] {
  --lch-primary: 74% 0.16 350;
  --lch-accent: 74% 0.12 350;
  --lch-accent-light: 28% 0.05 350;
  --lch-accent-dark: 42% 0.08 350;
  --accent: oklch(74% 0.10 350);
  --accent-soft: oklch(20% 0.05 350);
  --accent-hover: oklch(80% 0.09 350);
  --accent-strong: oklch(67% 0.12 350);
  --msg-me: oklch(44% 0.08 350);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 350);
}

/* --- Rose (Airbnb #FF385C, hue 15) --- */

html[data-color="rose"][data-color] {
  --lch-primary: 58% 0.22 15;
  --lch-accent: 58% 0.16 15;
  --lch-accent-light: 93% 0.04 15;
  --lch-accent-dark: 72% 0.12 15;
  --accent: oklch(58% 0.13 15);
  --accent-soft: oklch(93% 0.04 15);
  --accent-hover: oklch(51% 0.14 15);
  --accent-strong: oklch(44% 0.16 15);
  --msg-me: oklch(54% 0.12 15);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 15);
}

@media (prefers-color-scheme: dark) { html[data-color="rose"][data-color]:not([data-theme="light"]) {
  --lch-primary: 72% 0.16 15;
  --lch-accent: 72% 0.12 15;
  --lch-accent-light: 28% 0.05 15;
  --lch-accent-dark: 42% 0.08 15;
  --accent: oklch(72% 0.10 15);
  --accent-soft: oklch(20% 0.05 15);
  --accent-hover: oklch(78% 0.09 15);
  --accent-strong: oklch(65% 0.12 15);
  --msg-me: oklch(42% 0.08 15);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 15);
}}

html[data-color="rose"][data-theme="dark"] {
  --lch-primary: 72% 0.16 15;
  --lch-accent: 72% 0.12 15;
  --lch-accent-light: 28% 0.05 15;
  --lch-accent-dark: 42% 0.08 15;
  --accent: oklch(72% 0.10 15);
  --accent-soft: oklch(20% 0.05 15);
  --accent-hover: oklch(78% 0.09 15);
  --accent-strong: oklch(65% 0.12 15);
  --msg-me: oklch(42% 0.08 15);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 15);
}

/* --- Orange (Shopify #FF6900, hue 50) --- */

html[data-color="orange"][data-color] {
  --lch-primary: 65% 0.20 50;
  --lch-accent: 65% 0.14 50;
  --lch-accent-light: 93% 0.04 50;
  --lch-accent-dark: 72% 0.12 50;
  --accent: oklch(65% 0.11 50);
  --accent-soft: oklch(93% 0.04 50);
  --accent-hover: oklch(58% 0.12 50);
  --accent-strong: oklch(51% 0.14 50);
  --msg-me: oklch(61% 0.10 50);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 50);
}

@media (prefers-color-scheme: dark) { html[data-color="orange"][data-color]:not([data-theme="light"]) {
  --lch-primary: 76% 0.14 50;
  --lch-accent: 76% 0.10 50;
  --lch-accent-light: 28% 0.05 50;
  --lch-accent-dark: 42% 0.08 50;
  --accent: oklch(76% 0.08 50);
  --accent-soft: oklch(20% 0.05 50);
  --accent-hover: oklch(82% 0.07 50);
  --accent-strong: oklch(69% 0.10 50);
  --msg-me: oklch(46% 0.06 50);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 50);
}}

html[data-color="orange"][data-theme="dark"] {
  --lch-primary: 76% 0.14 50;
  --lch-accent: 76% 0.10 50;
  --lch-accent-light: 28% 0.05 50;
  --lch-accent-dark: 42% 0.08 50;
  --accent: oklch(76% 0.08 50);
  --accent-soft: oklch(20% 0.05 50);
  --accent-hover: oklch(82% 0.07 50);
  --accent-strong: oklch(69% 0.10 50);
  --msg-me: oklch(46% 0.06 50);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 50);
}

/* --- Teal (Canva #00C4CC, hue 185) --- */

html[data-color="teal"][data-color] {
  --lch-primary: 62% 0.14 185;
  --lch-accent: 62% 0.10 185;
  --lch-accent-light: 93% 0.04 185;
  --lch-accent-dark: 72% 0.12 185;
  --accent: oklch(62% 0.08 185);
  --accent-soft: oklch(93% 0.04 185);
  --accent-hover: oklch(55% 0.09 185);
  --accent-strong: oklch(48% 0.11 185);
  --msg-me: oklch(58% 0.07 185);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 185);
}

@media (prefers-color-scheme: dark) { html[data-color="teal"][data-color]:not([data-theme="light"]) {
  --lch-primary: 74% 0.10 185;
  --lch-accent: 74% 0.08 185;
  --lch-accent-light: 28% 0.05 185;
  --lch-accent-dark: 42% 0.08 185;
  --accent: oklch(74% 0.06 185);
  --accent-soft: oklch(20% 0.05 185);
  --accent-hover: oklch(80% 0.05 185);
  --accent-strong: oklch(67% 0.08 185);
  --msg-me: oklch(44% 0.05 185);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 185);
}}

html[data-color="teal"][data-theme="dark"] {
  --lch-primary: 74% 0.10 185;
  --lch-accent: 74% 0.08 185;
  --lch-accent-light: 28% 0.05 185;
  --lch-accent-dark: 42% 0.08 185;
  --accent: oklch(74% 0.06 185);
  --accent-soft: oklch(20% 0.05 185);
  --accent-hover: oklch(80% 0.05 185);
  --accent-strong: oklch(67% 0.08 185);
  --msg-me: oklch(44% 0.05 185);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 185);
}

/* --- Cyan (Twitter #1DA1F2, hue 230) --- */

html[data-color="cyan"][data-color] {
  --lch-primary: 60% 0.18 230;
  --lch-accent: 60% 0.12 230;
  --lch-accent-light: 93% 0.04 230;
  --lch-accent-dark: 72% 0.12 230;
  --accent: oklch(60% 0.10 230);
  --accent-soft: oklch(93% 0.04 230);
  --accent-hover: oklch(53% 0.11 230);
  --accent-strong: oklch(46% 0.13 230);
  --msg-me: oklch(56% 0.09 230);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 230);
}

@media (prefers-color-scheme: dark) { html[data-color="cyan"][data-color]:not([data-theme="light"]) {
  --lch-primary: 74% 0.12 230;
  --lch-accent: 74% 0.08 230;
  --lch-accent-light: 28% 0.05 230;
  --lch-accent-dark: 42% 0.08 230;
  --accent: oklch(74% 0.06 230);
  --accent-soft: oklch(20% 0.05 230);
  --accent-hover: oklch(80% 0.05 230);
  --accent-strong: oklch(67% 0.08 230);
  --msg-me: oklch(44% 0.06 230);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 230);
}}

html[data-color="cyan"][data-theme="dark"] {
  --lch-primary: 74% 0.12 230;
  --lch-accent: 74% 0.08 230;
  --lch-accent-light: 28% 0.05 230;
  --lch-accent-dark: 42% 0.08 230;
  --accent: oklch(74% 0.06 230);
  --accent-soft: oklch(20% 0.05 230);
  --accent-hover: oklch(80% 0.05 230);
  --accent-strong: oklch(67% 0.08 230);
  --msg-me: oklch(44% 0.06 230);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 230);
}

/* --- Amber (Bumble #FFC629, hue 80) --- */

html[data-color="amber"][data-color] {
  --lch-primary: 75% 0.17 80;
  --lch-accent: 75% 0.11 80;
  --lch-accent-light: 93% 0.04 80;
  --lch-accent-dark: 72% 0.12 80;
  --accent: oklch(75% 0.08 80);
  --accent-soft: oklch(93% 0.04 80);
  --accent-hover: oklch(68% 0.09 80);
  --accent-strong: oklch(61% 0.11 80);
  --msg-me: oklch(71% 0.07 80);
  --msg-me-text: oklch(0% 0 0);
  --sidebar-active: oklch(93% 0.04 80);
}

@media (prefers-color-scheme: dark) { html[data-color="amber"][data-color]:not([data-theme="light"]) {
  --lch-primary: 82% 0.11 80;
  --lch-accent: 82% 0.07 80;
  --lch-accent-light: 28% 0.05 80;
  --lch-accent-dark: 42% 0.08 80;
  --accent: oklch(82% 0.05 80);
  --accent-soft: oklch(20% 0.05 80);
  --accent-hover: oklch(88% 0.04 80);
  --accent-strong: oklch(75% 0.07 80);
  --msg-me: oklch(52% 0.05 80);
  --msg-me-text: oklch(0% 0 0);
  --sidebar-active: oklch(18% 0.04 80);
}}

html[data-color="amber"][data-theme="dark"] {
  --lch-primary: 82% 0.11 80;
  --lch-accent: 82% 0.07 80;
  --lch-accent-light: 28% 0.05 80;
  --lch-accent-dark: 42% 0.08 80;
  --accent: oklch(82% 0.05 80);
  --accent-soft: oklch(20% 0.05 80);
  --accent-hover: oklch(88% 0.04 80);
  --accent-strong: oklch(75% 0.07 80);
  --msg-me: oklch(52% 0.05 80);
  --msg-me-text: oklch(0% 0 0);
  --sidebar-active: oklch(18% 0.04 80);
}

/* --- Red (YouTube #FF0000, hue 28) --- */

html[data-color="red"][data-color] {
  --lch-primary: 55% 0.23 28;
  --lch-accent: 55% 0.17 28;
  --lch-accent-light: 93% 0.04 28;
  --lch-accent-dark: 72% 0.12 28;
  --accent: oklch(55% 0.14 28);
  --accent-soft: oklch(93% 0.04 28);
  --accent-hover: oklch(48% 0.15 28);
  --accent-strong: oklch(41% 0.17 28);
  --msg-me: oklch(51% 0.13 28);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 28);
}

@media (prefers-color-scheme: dark) { html[data-color="red"][data-color]:not([data-theme="light"]) {
  --lch-primary: 70% 0.17 28;
  --lch-accent: 70% 0.13 28;
  --lch-accent-light: 28% 0.05 28;
  --lch-accent-dark: 42% 0.08 28;
  --accent: oklch(70% 0.11 28);
  --accent-soft: oklch(20% 0.05 28);
  --accent-hover: oklch(76% 0.10 28);
  --accent-strong: oklch(63% 0.13 28);
  --msg-me: oklch(40% 0.09 28);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 28);
}}

html[data-color="red"][data-theme="dark"] {
  --lch-primary: 70% 0.17 28;
  --lch-accent: 70% 0.13 28;
  --lch-accent-light: 28% 0.05 28;
  --lch-accent-dark: 42% 0.08 28;
  --accent: oklch(70% 0.11 28);
  --accent-soft: oklch(20% 0.05 28);
  --accent-hover: oklch(76% 0.10 28);
  --accent-strong: oklch(63% 0.13 28);
  --msg-me: oklch(40% 0.09 28);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 28);
}

/* --- Slate (Linear #5E6AD2, hue 277, low chroma) --- */

html[data-color="slate"][data-color] {
  --lch-primary: 53% 0.12 277;
  --lch-accent: 53% 0.08 277;
  --lch-accent-light: 93% 0.04 277;
  --lch-accent-dark: 72% 0.12 277;
  --accent: oklch(53% 0.06 277);
  --accent-soft: oklch(93% 0.04 277);
  --accent-hover: oklch(46% 0.07 277);
  --accent-strong: oklch(39% 0.09 277);
  --msg-me: oklch(49% 0.05 277);
  --msg-me-text: oklch(100% 0 0);
  --sidebar-active: oklch(93% 0.04 277);
}

@media (prefers-color-scheme: dark) { html[data-color="slate"][data-color]:not([data-theme="light"]) {
  --lch-primary: 68% 0.08 277;
  --lch-accent: 68% 0.06 277;
  --lch-accent-light: 28% 0.05 277;
  --lch-accent-dark: 42% 0.08 277;
  --accent: oklch(68% 0.04 277);
  --accent-soft: oklch(20% 0.05 277);
  --accent-hover: oklch(74% 0.03 277);
  --accent-strong: oklch(61% 0.06 277);
  --msg-me: oklch(38% 0.04 277);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 277);
}}

html[data-color="slate"][data-theme="dark"] {
  --lch-primary: 68% 0.08 277;
  --lch-accent: 68% 0.06 277;
  --lch-accent-light: 28% 0.05 277;
  --lch-accent-dark: 42% 0.08 277;
  --accent: oklch(68% 0.04 277);
  --accent-soft: oklch(20% 0.05 277);
  --accent-hover: oklch(74% 0.03 277);
  --accent-strong: oklch(61% 0.06 277);
  --msg-me: oklch(38% 0.04 277);
  --msg-me-text: oklch(96% 0 0);
  --sidebar-active: oklch(18% 0.04 277);
}