/* V2 prototype-wide lightweight semantics shared across every runtime page. */
:root {
  --v2-text-placeholder: oklch(0.74 0.006 245);
  --v2-navigation-chevron: oklch(0.68 0.008 248);
  --v2-navigation-chevron-hover: oklch(0.52 0.012 248);
}

:root input::placeholder,
:root textarea::placeholder {
  color: var(--v2-text-placeholder);
  opacity: 1;
}

/*
 * Trailing chevrons are secondary navigation cues, not content emphasis.
 * Back navigation and inverted primary actions retain their inherited contrast.
 */
:root svg:has(use[href="#icon-chevron-right"]),
:root svg:has(use[href="#chevron-right"]) {
  color: var(--v2-navigation-chevron);
  transition: color 160ms cubic-bezier(.22, 1, .36, 1), transform 160ms cubic-bezier(.22, 1, .36, 1);
}

:root :is(a, button, [role="button"]):not(.detail-back):not(.back-link):not(.secondary-mobile-back):hover svg:has(use[href="#icon-chevron-right"]),
:root :is(a, button, [role="button"]):not(.detail-back):not(.back-link):not(.secondary-mobile-back):hover svg:has(use[href="#chevron-right"]) {
  color: var(--v2-navigation-chevron-hover);
}

:root :is(.detail-back, .back-link, .secondary-mobile-back, .primary-button, .button--primary, .composer-send-button) svg:has(use[href="#icon-chevron-right"]),
:root :is(.detail-back, .back-link, .secondary-mobile-back, .primary-button, .button--primary, .composer-send-button) svg:has(use[href="#chevron-right"]) {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  :root svg:has(use[href="#icon-chevron-right"]),
  :root svg:has(use[href="#chevron-right"]) { transition: none; }
}