/* Colorrow Phase 24 accessibility QA fixes.
   Loaded after existing route styles so frozen shared assets remain unchanged. */
:root {
  /* The previous light-theme accent was <4.5:1 for small accent labels on the canvas. */
  --cr-accent: #c43f36;
}

/* Legacy palette cards use div/span click targets in the frozen app bundle.
   The Phase 24 runtime gives them button semantics; keep those focus states obvious. */
.color-block[role="button"],
.hex[role="button"] {
  outline: none;
}
.color-block[role="button"]:focus-visible,
.hex[role="button"]:focus-visible {
  position: relative;
  z-index: 4;
  outline: 3px solid var(--cr-focus, #2459d3) !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}
.hex[role="button"]:focus-visible { outline-offset: 2px !important; }

/* Make the shared palette dialog keyboard focus visible even on legacy route CSS. */
#paletteModal .modal-box:focus-visible {
  outline: 3px solid var(--cr-focus, #2459d3);
  outline-offset: 4px;
}

/* WCAG 2.2 AA target-size safety floor for icon/action controls added by the site shell. */
:where(.cr-icon-btn, .cr-nav-toggle, .round-action, .filter-tag, .small-btn, .hex[role="button"]) {
  min-width: 24px;
  min-height: 24px;
}

/* 404 pages do not load foundation.css; give them the same keyboard/motion baseline. */
:where(a, button, input, select, textarea, summary, [tabindex="0"], [role="button"]):focus-visible {
  outline: 3px solid var(--cr-focus, #2459d3);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}