/*
 * Neon Work OS palette layer.
 * Load after tokens.css and before components.css.
 * Cyan is the default; data-palette is optional for backward compatibility.
 */

:root[data-palette="cyan"] {
  --ds-color-primary: #4be7ef;
  --ds-color-primary-strong: #1dbfc9;
  --ds-color-secondary: #3f82d9;
  --ds-color-brand: #95f9ff;
  --ds-color-border-strong: rgba(138, 197, 255, 0.34);
  --ds-color-primary-soft: rgba(75, 231, 239, 0.09);
  --ds-color-primary-contrast: #061116;
  --ds-gradient-primary: linear-gradient(135deg, #4be7ef, #3f82d9);
  --ds-gradient-brand: linear-gradient(135deg, rgba(75, 231, 239, 0.22), rgba(63, 130, 217, 0.16));
  --ds-shadow-glow: 0 0 24px rgba(75, 231, 239, 0.24), 0 0 64px rgba(63, 130, 217, 0.13);
  --ds-focus-ring: 0 0 0 3px rgba(75, 231, 239, 0.34);
  --ds-shell-bg:
    linear-gradient(90deg, rgba(14, 20, 39, 0.96) 0 286px, rgba(7, 11, 22, 0.88) 286px),
    radial-gradient(ellipse 26% 34% at 52% -6%, rgba(255, 255, 255, 0.72) 0 8%, rgba(107, 226, 255, 0.34) 16%, transparent 36%),
    linear-gradient(135deg, rgba(75, 231, 239, 0.05), rgba(139, 92, 246, 0.05) 52%, transparent);
}

:root[data-theme="light"][data-palette="cyan"] {
  --ds-color-primary: #0faeb9;
  --ds-color-primary-strong: #0997a1;
  --ds-color-secondary: #2f70c7;
  --ds-color-brand: #0c7f89;
  --ds-color-border-strong: rgba(20, 151, 180, 0.36);
  --ds-color-primary-soft: rgba(15, 174, 185, 0.1);
  --ds-color-primary-contrast: #061116;
  --ds-gradient-primary: linear-gradient(135deg, #20bac4, #3c7fd5);
  --ds-gradient-brand: linear-gradient(135deg, rgba(15, 174, 185, 0.24), rgba(47, 112, 199, 0.16));
  --ds-shadow-glow: 0 0 18px rgba(15, 174, 185, 0.16), 0 0 48px rgba(47, 112, 199, 0.1);
  --ds-focus-ring: 0 0 0 3px rgba(15, 174, 185, 0.24);
  --ds-shell-bg:
    linear-gradient(90deg, rgba(248, 251, 255, 0.96) 0 286px, rgba(239, 245, 252, 0.9) 286px),
    radial-gradient(ellipse 30% 32% at 52% -6%, rgba(255, 255, 255, 0.9) 0 9%, rgba(79, 205, 222, 0.22) 18%, transparent 42%),
    linear-gradient(135deg, rgba(15, 174, 185, 0.07), rgba(123, 92, 214, 0.05) 52%, transparent);
}

:root[data-palette="orange"] {
  --ds-color-primary: #ff9a52;
  --ds-color-primary-strong: #f06a23;
  --ds-color-secondary: #ff5f45;
  --ds-color-brand: #ffd0a6;
  --ds-color-border-strong: rgba(255, 166, 105, 0.38);
  --ds-color-primary-soft: rgba(255, 154, 82, 0.1);
  --ds-color-primary-contrast: #1b0b03;
  --ds-gradient-primary: linear-gradient(135deg, #ffad66, #ff5f45);
  --ds-gradient-brand: linear-gradient(135deg, rgba(255, 154, 82, 0.24), rgba(255, 95, 69, 0.17));
  --ds-shadow-glow: 0 0 24px rgba(255, 154, 82, 0.25), 0 0 64px rgba(255, 95, 69, 0.14);
  --ds-focus-ring: 0 0 0 3px rgba(255, 154, 82, 0.34);
  --ds-color-warning: #f7cf63;
  --ds-shell-bg:
    linear-gradient(90deg, rgba(28, 17, 16, 0.96) 0 286px, rgba(13, 10, 15, 0.9) 286px),
    radial-gradient(ellipse 26% 34% at 52% -6%, rgba(255, 246, 232, 0.72) 0 8%, rgba(255, 155, 91, 0.36) 16%, transparent 36%),
    linear-gradient(135deg, rgba(255, 154, 82, 0.07), rgba(255, 79, 123, 0.05) 52%, transparent);
}

:root[data-theme="light"][data-palette="orange"] {
  --ds-color-primary: #c6530d;
  --ds-color-primary-strong: #9f3e05;
  --ds-color-secondary: #c63f36;
  --ds-color-brand: #a84609;
  --ds-color-border-strong: rgba(198, 83, 13, 0.34);
  --ds-color-primary-soft: rgba(198, 83, 13, 0.1);
  --ds-color-primary-contrast: #ffffff;
  --ds-gradient-primary: linear-gradient(135deg, #c6530d, #bd3932);
  --ds-gradient-brand: linear-gradient(135deg, rgba(198, 83, 13, 0.22), rgba(198, 63, 54, 0.14));
  --ds-shadow-glow: 0 0 18px rgba(198, 83, 13, 0.16), 0 0 48px rgba(198, 63, 54, 0.1);
  --ds-focus-ring: 0 0 0 3px rgba(198, 83, 13, 0.24);
  --ds-color-warning: #8a6400;
  --ds-shell-bg:
    linear-gradient(90deg, rgba(255, 250, 245, 0.97) 0 286px, rgba(250, 244, 240, 0.92) 286px),
    radial-gradient(ellipse 30% 32% at 52% -6%, rgba(255, 255, 255, 0.92) 0 9%, rgba(255, 172, 105, 0.24) 18%, transparent 42%),
    linear-gradient(135deg, rgba(198, 83, 13, 0.07), rgba(198, 63, 54, 0.045) 52%, transparent);
}

:root[data-palette="violet"] {
  --ds-color-primary: #a78bfa;
  --ds-color-primary-strong: #7c5ce5;
  --ds-color-secondary: #668cff;
  --ds-color-brand: #d4c7ff;
  --ds-color-border-strong: rgba(177, 153, 255, 0.38);
  --ds-color-primary-soft: rgba(167, 139, 250, 0.1);
  --ds-color-primary-contrast: #10091f;
  --ds-gradient-primary: linear-gradient(135deg, #b69cff, #668cff);
  --ds-gradient-brand: linear-gradient(135deg, rgba(167, 139, 250, 0.24), rgba(102, 140, 255, 0.17));
  --ds-shadow-glow: 0 0 24px rgba(167, 139, 250, 0.25), 0 0 64px rgba(102, 140, 255, 0.14);
  --ds-focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.34);
  --ds-shell-bg:
    linear-gradient(90deg, rgba(20, 15, 36, 0.96) 0 286px, rgba(9, 9, 22, 0.9) 286px),
    radial-gradient(ellipse 26% 34% at 52% -6%, rgba(249, 246, 255, 0.72) 0 8%, rgba(174, 143, 255, 0.36) 16%, transparent 36%),
    linear-gradient(135deg, rgba(167, 139, 250, 0.07), rgba(102, 140, 255, 0.05) 52%, transparent);
}

:root[data-theme="light"][data-palette="violet"] {
  --ds-color-primary: #6950b8;
  --ds-color-primary-strong: #51399f;
  --ds-color-secondary: #3f62b7;
  --ds-color-brand: #5941a5;
  --ds-color-border-strong: rgba(105, 80, 184, 0.34);
  --ds-color-primary-soft: rgba(105, 80, 184, 0.1);
  --ds-color-primary-contrast: #ffffff;
  --ds-gradient-primary: linear-gradient(135deg, #765ac6, #486abf);
  --ds-gradient-brand: linear-gradient(135deg, rgba(105, 80, 184, 0.22), rgba(63, 98, 183, 0.14));
  --ds-shadow-glow: 0 0 18px rgba(105, 80, 184, 0.16), 0 0 48px rgba(63, 98, 183, 0.1);
  --ds-focus-ring: 0 0 0 3px rgba(105, 80, 184, 0.24);
  --ds-shell-bg:
    linear-gradient(90deg, rgba(250, 248, 255, 0.97) 0 286px, rgba(243, 242, 251, 0.92) 286px),
    radial-gradient(ellipse 30% 32% at 52% -6%, rgba(255, 255, 255, 0.92) 0 9%, rgba(174, 149, 245, 0.24) 18%, transparent 42%),
    linear-gradient(135deg, rgba(105, 80, 184, 0.07), rgba(63, 98, 183, 0.045) 52%, transparent);
}

:root[data-palette="emerald"] {
  --ds-color-primary: #4ce6a6;
  --ds-color-primary-strong: #18b779;
  --ds-color-secondary: #20bfcf;
  --ds-color-brand: #9affd3;
  --ds-color-border-strong: rgba(92, 230, 174, 0.38);
  --ds-color-primary-soft: rgba(76, 230, 166, 0.1);
  --ds-color-primary-contrast: #04150d;
  --ds-gradient-primary: linear-gradient(135deg, #58e9ac, #20bfcf);
  --ds-gradient-brand: linear-gradient(135deg, rgba(76, 230, 166, 0.24), rgba(32, 191, 207, 0.17));
  --ds-shadow-glow: 0 0 24px rgba(76, 230, 166, 0.24), 0 0 64px rgba(32, 191, 207, 0.13);
  --ds-focus-ring: 0 0 0 3px rgba(76, 230, 166, 0.34);
  --ds-shell-bg:
    linear-gradient(90deg, rgba(10, 28, 26, 0.96) 0 286px, rgba(6, 14, 20, 0.9) 286px),
    radial-gradient(ellipse 26% 34% at 52% -6%, rgba(240, 255, 249, 0.72) 0 8%, rgba(76, 230, 166, 0.34) 16%, transparent 36%),
    linear-gradient(135deg, rgba(76, 230, 166, 0.07), rgba(32, 191, 207, 0.05) 52%, transparent);
}

:root[data-theme="light"][data-palette="emerald"] {
  --ds-color-primary: #087d59;
  --ds-color-primary-strong: #056343;
  --ds-color-secondary: #0b7482;
  --ds-color-brand: #076e51;
  --ds-color-border-strong: rgba(8, 125, 89, 0.34);
  --ds-color-primary-soft: rgba(8, 125, 89, 0.1);
  --ds-color-primary-contrast: #ffffff;
  --ds-gradient-primary: linear-gradient(135deg, #087d59, #0b7482);
  --ds-gradient-brand: linear-gradient(135deg, rgba(8, 125, 89, 0.22), rgba(11, 116, 130, 0.14));
  --ds-shadow-glow: 0 0 18px rgba(8, 125, 89, 0.16), 0 0 48px rgba(11, 116, 130, 0.1);
  --ds-focus-ring: 0 0 0 3px rgba(8, 125, 89, 0.24);
  --ds-shell-bg:
    linear-gradient(90deg, rgba(246, 253, 250, 0.97) 0 286px, rgba(238, 248, 247, 0.92) 286px),
    radial-gradient(ellipse 30% 32% at 52% -6%, rgba(255, 255, 255, 0.92) 0 9%, rgba(92, 221, 170, 0.23) 18%, transparent 42%),
    linear-gradient(135deg, rgba(8, 125, 89, 0.07), rgba(11, 116, 130, 0.045) 52%, transparent);
}

:root[data-palette="raspberry"] {
  --ds-color-primary: #ff5f9a;
  --ds-color-primary-strong: #d93675;
  --ds-color-secondary: #a855f7;
  --ds-color-brand: #ffb3d0;
  --ds-color-border-strong: rgba(255, 111, 164, 0.38);
  --ds-color-primary-soft: rgba(255, 95, 154, 0.1);
  --ds-color-primary-contrast: #1c0610;
  --ds-gradient-primary: linear-gradient(135deg, #ff6fa6, #a855f7);
  --ds-gradient-brand: linear-gradient(135deg, rgba(255, 95, 154, 0.24), rgba(168, 85, 247, 0.17));
  --ds-shadow-glow: 0 0 24px rgba(255, 95, 154, 0.25), 0 0 64px rgba(168, 85, 247, 0.14);
  --ds-focus-ring: 0 0 0 3px rgba(255, 95, 154, 0.34);
  --ds-color-danger: #ff826b;
  --ds-shell-bg:
    linear-gradient(90deg, rgba(31, 12, 26, 0.96) 0 286px, rgba(13, 8, 20, 0.9) 286px),
    radial-gradient(ellipse 26% 34% at 52% -6%, rgba(255, 243, 249, 0.72) 0 8%, rgba(255, 104, 162, 0.35) 16%, transparent 36%),
    linear-gradient(135deg, rgba(255, 95, 154, 0.07), rgba(168, 85, 247, 0.05) 52%, transparent);
}

:root[data-theme="light"][data-palette="raspberry"] {
  --ds-color-primary: #b9255d;
  --ds-color-primary-strong: #941746;
  --ds-color-secondary: #7d36bf;
  --ds-color-brand: #a71f54;
  --ds-color-border-strong: rgba(185, 37, 93, 0.34);
  --ds-color-primary-soft: rgba(185, 37, 93, 0.1);
  --ds-color-primary-contrast: #ffffff;
  --ds-gradient-primary: linear-gradient(135deg, #c22d67, #8742c8);
  --ds-gradient-brand: linear-gradient(135deg, rgba(185, 37, 93, 0.22), rgba(125, 54, 191, 0.14));
  --ds-shadow-glow: 0 0 18px rgba(185, 37, 93, 0.16), 0 0 48px rgba(125, 54, 191, 0.1);
  --ds-focus-ring: 0 0 0 3px rgba(185, 37, 93, 0.24);
  --ds-color-danger: #a9382d;
  --ds-shell-bg:
    linear-gradient(90deg, rgba(255, 248, 252, 0.97) 0 286px, rgba(249, 241, 247, 0.92) 286px),
    radial-gradient(ellipse 30% 32% at 52% -6%, rgba(255, 255, 255, 0.92) 0 9%, rgba(239, 122, 169, 0.23) 18%, transparent 42%),
    linear-gradient(135deg, rgba(185, 37, 93, 0.07), rgba(125, 54, 191, 0.045) 52%, transparent);
}

/* Preview swatches remain stable while the active application palette changes. */
[data-palette-choice="cyan"] {
  --ds-swatch-primary: #4be7ef;
  --ds-swatch-secondary: #3f82d9;
}

[data-palette-choice="orange"] {
  --ds-swatch-primary: #ff9a52;
  --ds-swatch-secondary: #ff5f45;
}

[data-palette-choice="violet"] {
  --ds-swatch-primary: #a78bfa;
  --ds-swatch-secondary: #668cff;
}

[data-palette-choice="emerald"] {
  --ds-swatch-primary: #4ce6a6;
  --ds-swatch-secondary: #20bfcf;
}

[data-palette-choice="raspberry"] {
  --ds-swatch-primary: #ff5f9a;
  --ds-swatch-secondary: #a855f7;
}