/* Theme harmony — auth tabs, colorblind accents (buttons: styles.css + theme-dim.css) */

/* Auth tabs — neutral idle, no accent wash */

[data-theme="light"][data-mood="plum"] .btn-secondary:hover,
[data-theme="light"][data-mood="plum"]:not([data-mood]) .btn-secondary:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

/* Auth tabs — neutral idle, no accent wash */

.auth-tabs {
  background: var(--surface-muted);
  border-color: var(--border-subtle);
}

.auth-tab {
  color: var(--text-muted);
  background: transparent;
}

.auth-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.auth-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

/* Colorblind (Okabe–Ito) — distinguish without heavy orange frame */

html[data-vision~="cb"] .btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--success);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-pop) 55%, transparent),
    0 6px 18px -8px color-mix(in srgb, var(--accent) 35%, transparent);
}

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

html[data-vision~="cb"] .btn-secondary {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

html[data-vision~="cb"] .btn-secondary:hover {
  border-color: var(--accent-pop);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

html[data-vision~="cb"] .auth-tab.is-active {
  box-shadow: inset 0 0 0 2px var(--accent);
}

html[data-vision~="cb"] .eyebrow {
  color: var(--accent);
}

html[data-vision~="cb"] .vision-cb-btn--on {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent-pop);
}

/* Mocha / cloud light — on-accent contrast on warm buttons */

[data-theme="light"][data-mood="mocha"] .btn-primary,
[data-theme="light"][data-mood="cloud"] .btn-primary {
  color: var(--on-accent);
}

/* Dark moods — orange CTAs stay readable */

[data-theme="dark"] .btn-orange {
  color: #1a1a1a;
}

[data-theme="dark"][data-mood="plum"] .btn-orange,
[data-theme="dark"]:not([data-mood]) .btn-orange {
  color: #1a1a2e;
}