/* Colorblind-safe UI — Okabe–Ito / Wong (Nature Methods)
   Orange #E69F00 · Sky #56B4E9 · Bluish green #009E73 · Yellow #F0E442
   Blue #0072B2 · Vermillion #D55E00 · Reddish purple #CC79A7
   Rules: high luminance contrast; no red–green-only status; shapes + outline
   backup status badges. Mood hues yield to this palette while CB is on. */

html[data-vision~="cb"] {
  --oi-orange: #e69f00;
  --oi-sky: #56b4e9;
  --oi-green: #009e73;
  --oi-yellow: #f0e442;
  --oi-blue: #0072b2;
  --oi-vermillion: #d55e00;
  --oi-purple: #cc79a7;

  /* Roles — distinguishable under protanopia / deuteranopia / tritanopia */
  --accent: var(--oi-blue);
  --accent-hover: #005a8f;
  --accent-muted: var(--oi-sky);
  --accent-pop: var(--oi-orange);
  --accent-pop-hover: #cc8c00;
  --focus: var(--oi-blue);
  --orange: var(--oi-vermillion);
  --orange-hover: #b84e00;
  --success: var(--oi-green);
  --danger: var(--oi-vermillion);
  --locked: #666666;
  --locked-text: #444444;
  --on-accent: #ffffff;
  --status-ok: var(--oi-green);
  --glow-warm: color-mix(in srgb, var(--oi-orange) 18%, transparent);
  --glow-cool: color-mix(in srgb, var(--oi-blue) 14%, transparent);
}

/* Light: black text on pale cool ground; blue primary (strong on white) */
html[data-vision~="cb"][data-theme="light"],
html[data-vision~="cb"][data-theme="light"][data-mood="cloud"],
html[data-vision~="cb"][data-theme="light"][data-mood="mocha"],
html[data-vision~="cb"][data-theme="light"][data-mood="plum"] {
  --text: #000000;
  --text-muted: #333333;
  --border: #0072b2;
  --border-subtle: #7a9eb8;
  --bg: #f7f9fb;
  --bg-subtle: #e8eef4;
  --surface: #ffffff;
  --surface-muted: #eef3f7;
  --on-accent: #ffffff;
  --locked: #666666;
  --locked-text: #333333;
}

/* Dark: light text; sky blue as accent (blue #0072B2 is too dim on dark) */
html[data-vision~="cb"][data-theme="dark"],
html[data-vision~="cb"][data-theme="dark"][data-mood="cloud"],
html[data-vision~="cb"][data-theme="dark"][data-mood="mocha"],
html[data-vision~="cb"][data-theme="dark"][data-mood="plum"] {
  --accent: #56b4e9;
  --accent-hover: #7ec8f0;
  --accent-muted: #8ad0f5;
  --accent-pop: #f0e442;
  --accent-pop-hover: #e69f00;
  --focus: #56b4e9;
  --text: #ffffff;
  --text-muted: #d0d0d0;
  --border: #56b4e9;
  --border-subtle: #4a6a82;
  --bg: #0a1016;
  --bg-subtle: #121a22;
  --surface: #1a2430;
  --surface-muted: #243140;
  --on-accent: #0a1016;
  --locked: #999999;
  --locked-text: #d0d0d0;
  --success: #00b884;
  --danger: #ff6a2a;
}

/* Dim / midday: mid luminance, same role mapping as dark for accents */
html[data-vision~="cb"][data-theme="dim"],
html[data-vision~="cb"][data-theme="dim"][data-mood="cloud"],
html[data-vision~="cb"][data-theme="dim"][data-mood="mocha"],
html[data-vision~="cb"][data-theme="dim"][data-mood="plum"] {
  --accent: #56b4e9;
  --accent-hover: #7ec8f0;
  --accent-muted: #8ad0f5;
  --accent-pop: #f0e442;
  --accent-pop-hover: #e69f00;
  --focus: #56b4e9;
  --text: #f4f4f8;
  --text-muted: #d0d0d8;
  --border: #56b4e9;
  --border-subtle: #5a6a78;
  --bg: #2a323a;
  --bg-subtle: #323a44;
  --surface: #3a4450;
  --surface-muted: #44505c;
  --on-accent: #1a2028;
  --success: #00b884;
  --danger: #ff6a2a;
}

/* Status: never color-only — outline + diamond marker */
html[data-vision~="cb"] .status-badge,
html[data-vision~="cb"] .tier-badge {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

html[data-vision~="cb"] .header-member-dock__badge .status-badge,
html[data-vision~="cb"] .header-member-dock__badge .tier-badge {
  outline: none;
}

html[data-vision~="cb"] .schema-row--tier .schema-row__tag::before {
  content: "◆ ";
  color: var(--accent-pop);
}

/* Primary: solid Okabe blue/sky — no gradient wash that muddies CVD */
html[data-vision~="cb"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}

html[data-vision~="cb"] .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

html[data-vision~="cb"] .btn-secondary {
  border-color: var(--border);
  color: var(--text);
}

html[data-vision~="cb"] a:not(.btn):not(.logo) {
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

html[data-vision~="cb"] .catalog-preview[data-panel-active="service"] {
  border-color: var(--oi-blue);
  border-width: 2px;
}

html[data-vision~="cb"] .catalog-preview[data-panel-active="device"] {
  border-color: var(--oi-green);
  border-width: 2px;
}

html[data-vision~="cb"] .vision-cb-btn--on,
html[data-vision~="cb"] .header-tools__display .vision-cb-btn[aria-pressed="true"] {
  color: var(--accent-pop);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--accent);
}