/* Shared colour-vision themes — keep gateway, music, and Opure in the same mode */

html[data-cb=assist] {
  --lime: #38bdf8;
  --lime-hot: #7dd3fc;
  --lime-dim: #0284c7;
  --cyan: #38bdf8;
  --magenta: #7dd3fc;
  --pink: #93c5fd;
  --cb-accent: #38bdf8;
  --opure-primary: #38bdf8;
  --opure-primary-glow: rgba(56, 189, 248, 0.45);
  --opure-surface-border: rgba(56, 189, 248, 0.3);
  --m-magenta: #38bdf8;
  --m-magenta-dim: rgba(56, 189, 248, 0.65);
  --m-magenta-glow: rgba(56, 189, 248, 0.3);
  --m-magenta-halo: rgba(56, 189, 248, 0.1);
  --m-cyan: #7dd3fc;
  --m-cyan-dim: rgba(125, 211, 252, 0.65);
  --m-cyan-glow: rgba(125, 211, 252, 0.3);
  --m-pink: #93c5fd;
  --m-border: rgba(56, 189, 248, 0.22);
  --m-border-hover: rgba(56, 189, 248, 0.5);
}

html[data-cb=protanopia] {
  --lime: #f59e0b;
  --lime-hot: #fbbf24;
  --lime-dim: #d97706;
  --cyan: #f59e0b;
  --magenta: #fbbf24;
  --pink: #fdba74;
  --cb-accent: #f59e0b;
  --opure-primary: #f59e0b;
  --opure-primary-glow: rgba(245, 158, 11, 0.45);
  --opure-surface-border: rgba(245, 158, 11, 0.3);
  --m-magenta: #f59e0b;
  --m-magenta-dim: rgba(245, 158, 11, 0.65);
  --m-magenta-glow: rgba(245, 158, 11, 0.3);
  --m-magenta-halo: rgba(245, 158, 11, 0.1);
  --m-cyan: #fbbf24;
  --m-cyan-dim: rgba(251, 191, 36, 0.65);
  --m-cyan-glow: rgba(251, 191, 36, 0.3);
  --m-pink: #fdba74;
  --m-border: rgba(245, 158, 11, 0.22);
  --m-border-hover: rgba(245, 158, 11, 0.5);
}

html[data-cb=deuteranopia] {
  --lime: #06b6d4;
  --lime-hot: #22d3ee;
  --lime-dim: #0891b2;
  --cyan: #06b6d4;
  --magenta: #22d3ee;
  --pink: #67e8f9;
  --cb-accent: #06b6d4;
  --opure-primary: #06b6d4;
  --opure-primary-glow: rgba(6, 182, 212, 0.45);
  --opure-surface-border: rgba(6, 182, 212, 0.3);
  --m-magenta: #06b6d4;
  --m-magenta-dim: rgba(6, 182, 212, 0.65);
  --m-magenta-glow: rgba(6, 182, 212, 0.3);
  --m-magenta-halo: rgba(6, 182, 212, 0.1);
  --m-cyan: #22d3ee;
  --m-cyan-dim: rgba(34, 211, 238, 0.65);
  --m-cyan-glow: rgba(34, 211, 238, 0.3);
  --m-pink: #67e8f9;
  --m-border: rgba(6, 182, 212, 0.22);
  --m-border-hover: rgba(6, 182, 212, 0.5);
}

html[data-cb=tritanopia] {
  --lime: #f43f5e;
  --lime-hot: #fb7185;
  --lime-dim: #e11d48;
  --cyan: #fb7185;
  --magenta: #f43f5e;
  --pink: #fda4af;
  --cb-accent: #f43f5e;
  --opure-primary: #f43f5e;
  --opure-primary-glow: rgba(244, 63, 94, 0.45);
  --opure-surface-border: rgba(244, 63, 94, 0.3);
  --m-magenta: #f43f5e;
  --m-magenta-dim: rgba(244, 63, 94, 0.65);
  --m-magenta-glow: rgba(244, 63, 94, 0.3);
  --m-magenta-halo: rgba(244, 63, 94, 0.1);
  --m-cyan: #fb7185;
  --m-cyan-dim: rgba(251, 113, 133, 0.65);
  --m-cyan-glow: rgba(251, 113, 133, 0.3);
  --m-pink: #fda4af;
  --m-border: rgba(244, 63, 94, 0.22);
  --m-border-hover: rgba(244, 63, 94, 0.5);
}

html[data-cb] .nav__cb,
html[data-cb] .gateway-cb {
  border-color: var(--cb-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cb-accent) 35%, transparent);
}

html[data-cb] .nav__cb-dot {
  background: var(--cb-accent) !important;
  color: var(--cb-accent) !important;
}

html[data-cb=assist] .pane--opure::after {
  background:
    radial-gradient(ellipse 60% 55% at 30% 40%, rgba(56, 189, 248, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 70%, rgba(125, 211, 252, 0.08) 0%, transparent 60%);
}
html[data-cb=assist] .pane--music::after {
  background:
    radial-gradient(ellipse 60% 55% at 60% 40%, rgba(56, 189, 248, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 70%, rgba(147, 197, 253, 0.08) 0%, transparent 60%);
}
html[data-cb=assist] .pane--fractal::after {
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(56, 189, 248, 0.14) 0%, transparent 70%);
}

html[data-cb=protanopia] .pane--opure::after,
html[data-cb=protanopia] .pane--fractal::after {
  background: radial-gradient(ellipse 60% 55% at 40% 45%, rgba(245, 158, 11, 0.14) 0%, transparent 70%);
}
html[data-cb=protanopia] .pane--music::after {
  background: radial-gradient(ellipse 60% 55% at 60% 40%, rgba(251, 191, 36, 0.14) 0%, transparent 70%);
}

html[data-cb=deuteranopia] .pane--opure::after,
html[data-cb=deuteranopia] .pane--fractal::after {
  background: radial-gradient(ellipse 60% 55% at 40% 45%, rgba(6, 182, 212, 0.14) 0%, transparent 70%);
}
html[data-cb=deuteranopia] .pane--music::after {
  background: radial-gradient(ellipse 60% 55% at 60% 40%, rgba(34, 211, 238, 0.14) 0%, transparent 70%);
}

html[data-cb=tritanopia] .pane--opure::after,
html[data-cb=tritanopia] .pane--fractal::after {
  background: radial-gradient(ellipse 60% 55% at 40% 45%, rgba(244, 63, 94, 0.14) 0%, transparent 70%);
}
html[data-cb=tritanopia] .pane--music::after {
  background: radial-gradient(ellipse 60% 55% at 60% 40%, rgba(251, 113, 133, 0.14) 0%, transparent 70%);
}

html[data-cb] .pane--opure .pane__badge,
html[data-cb] .pane--music .pane__badge,
html[data-cb] .pane--fractal .pane__badge {
  color: var(--cb-accent);
  border-color: color-mix(in srgb, var(--cb-accent) 35%, transparent);
  background: color-mix(in srgb, var(--cb-accent) 8%, transparent);
}

html[data-cb] .pane--opure .pane__cta,
html[data-cb] .pane--music .pane__cta,
html[data-cb] .pane--fractal .pane__cta {
  color: var(--cb-accent);
  border-color: color-mix(in srgb, var(--cb-accent) 40%, transparent);
  background: color-mix(in srgb, var(--cb-accent) 8%, transparent);
}