/* Veftr theme accessibility v1.
   Semantic contrast pairs are generated per built-in palette in variables.css
   and recalculated for user-customized palettes in theme-contrast.js. */

/* Accent fills are not automatically readable with the theme's default text.
   In particular Command Mono's near-white accent MUST use dark lettering. */
:where(button,a,[role="button"])[style*="background:var(--accent)"],
:where(button,a,[role="button"])[style*="background: var(--accent)"],
.theme-preview-controls button,
.tm-button-primary,
#tm-chat-send,
#user-settings-modal .tm-settings-done,
.tm-activity-primary {
  color:var(--on-accent,#000) !important;
}
/* Match foreground to filled semantic action surfaces. */
:where(button,a,[role="button"])[style*="background:var(--green)"],
:where(button,a,[role="button"])[style*="background: var(--green)"] {color:var(--on-green,#000) !important}
:where(button,a,[role="button"])[style*="background:var(--red)"],
:where(button,a,[role="button"])[style*="background: var(--red)"] {color:var(--on-red,#000) !important}
:where(button,a,[role="button"])[style*="background:var(--yellow)"],
:where(button,a,[role="button"])[style*="background: var(--yellow)"] {color:var(--on-yellow,#000) !important}

/* Accent is a fill color, not necessarily a readable small-text color. */
#user-settings-modal :is(.tm-settings-eyebrow,.tm-settings-nav-icon,.tm-settings-shortcuts button span:last-child,.tm-settings-identity-icon),
.theme-choice-check,
:where(.vault-title,.tm-selection-label)[style*="color:var(--accent)"] {
  color:var(--accent-text,var(--accent)) !important;
}
input::placeholder,textarea::placeholder {
  opacity:1 !important;
  color:var(--text-muted) !important;
}
:is(input,textarea,select):not(:disabled) {
  caret-color:var(--accent-text,var(--accent));
}
/* Disabled remains discernible instead of becoming text-on-tinted-glass. */
:is(button,[role="button"]):disabled,
:is(button,[role="button"])[aria-disabled="true"] {
  opacity:1 !important;
  color:var(--text-muted) !important;
  background:var(--surface-3) !important;
  border:1px solid var(--border-2) !important;
  cursor:not-allowed;
}
/* Focus must not depend on hover or color alone. */
:where(button,a,input,textarea,select,[role="button"],[tabindex]):focus-visible {
  outline:3px solid var(--focus-ring,var(--accent-text,var(--accent))) !important;
  outline-offset:3px;
}
/* Native touch/readability improvements without resizing existing layouts. */
button { text-wrap:pretty; }
@media (forced-colors:active) {
  :where(button,a,input,textarea,select,[role="button"]):focus-visible {outline:3px solid Highlight !important}
  :is(button,[role="button"]):disabled {color:GrayText !important;border-color:GrayText !important}
}

/* Legacy controls use hard-coded charcoal fills even in the Light palette.
   Always pair those surfaces with light foreground text. */
:where(button,a,[role="button"])[style*="background:#4f545c"],
:where(button,a,[role="button"])[style*="background: #4f545c"],
:where(button,a,[role="button"])[style*="background:#2b2d31"],
:where(button,a,[role="button"])[style*="background: #2b2d31"] {
 color:#ffffff !important;
}
/* Settings panels use nested button rules; preserve the intended accent fill. */
#user-settings-modal .tm-settings-card :is(button,[role="button"])[style*="background:var(--accent)"],
#user-settings-modal .tm-settings-card :is(button,[role="button"])[style*="background: var(--accent)"] {
 background-color:var(--accent) !important;
 color:var(--on-accent,#000000) !important;
}

/* Light surfaces should never render washed-out text through dark glass layers. */
:root[data-theme="veftr-light"] .modal-overlay .modal-card {
  background:var(--surface-1) !important;
  color:var(--text-1);
}
/* Brand/title lettering remains readable when palettes reverse brightness. */
.brand-thread {color:var(--accent-text,var(--accent)) !important}
.brand-mesh {color:var(--text-1) !important}
/* Small accent labels use the readable accent text role, not the fill tint. */
:where(div,span,b,strong,p,small,label)[style*="color:var(--accent)"],
:where(div,span,b,strong,p,small,label)[style*="color: var(--accent)"] {
 color:var(--accent-text,var(--accent)) !important;
}