:root {
  --a11y-focus-outline: #ffd670;
  --a11y-success-border: rgba(122, 223, 186, 0.8);
  --a11y-success-bg: rgba(122, 223, 186, 0.24);
  --a11y-success-text: #d7ffe8;
  --a11y-warning-border: rgba(255, 212, 133, 0.72);
  --a11y-warning-bg: rgba(255, 212, 133, 0.24);
  --a11y-warning-text: #fff0c7;
  --a11y-danger-border: rgba(255, 146, 170, 0.8);
  --a11y-danger-bg: rgba(255, 146, 170, 0.2);
  --a11y-danger-text: #ffdce5;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100000;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f7f1c5;
  border: 2px solid #201400;
  color: #141313;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 10px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--a11y-focus-outline) !important;
  outline-offset: 2px;
}

html.a11y-large-ui {
  font-size: 112%;
}

html.a11y-large-ui :is(button, .topbar-btn, .link-btn, .back-link, input, select, textarea, .shop-item-btn) {
  font-size: 1rem !important;
}

html.a11y-large-ui :is(.game-title, h1, h2) {
  letter-spacing: 0.01em;
}

html.a11y-reduced-motion *,
html.a11y-reduced-motion *::before,
html.a11y-reduced-motion *::after {
  animation-duration: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0ms !important;
  scroll-behavior: auto !important;
}

html.a11y-high-contrast {
  --fg: #f7fbff !important;
  --muted: #d9e7ff !important;
  --accent: #85cdff !important;
}

html.a11y-high-contrast :is(
  .subtitle,
  .game-desc,
  .mission-desc,
  .plan-meta,
  .shop-item-desc,
  .help,
  .note,
  .muted,
  p,
  li
) {
  color: var(--muted) !important;
}

html.a11y-high-contrast :is(
  .game-card,
  .recent-card,
  .shop-item,
  .panel,
  .plan-card,
  .status-card,
  .missions-section,
  .premium-section,
  .shop-controls,
  .checkout-panel,
  .detail-list,
  .card
) {
  border-color: rgba(194, 224, 255, 0.54) !important;
}

html :is(.mission-card.completed, .assignment-banner.complete, .status.ok) {
  border-color: var(--a11y-success-border) !important;
  background: var(--a11y-success-bg) !important;
  color: var(--a11y-success-text) !important;
}

html :is(.status.pending, .shop-item.premium-locked, .shop-item-btn.premium-lock, .premium-section) {
  border-color: var(--a11y-warning-border) !important;
  background: var(--a11y-warning-bg) !important;
  color: var(--a11y-warning-text) !important;
}

html :is(.status.error, .shop-item-btn.danger) {
  border-color: var(--a11y-danger-border) !important;
  background: var(--a11y-danger-bg) !important;
  color: var(--a11y-danger-text) !important;
}

html[data-a11y-color-profile="protanopia"] {
  --a11y-focus-outline: #ffd166;
  --a11y-success-border: rgba(114, 203, 255, 0.82);
  --a11y-success-bg: rgba(114, 203, 255, 0.24);
  --a11y-success-text: #ddf3ff;
  --a11y-warning-border: rgba(255, 199, 120, 0.82);
  --a11y-warning-bg: rgba(255, 199, 120, 0.24);
  --a11y-warning-text: #fff0d2;
  --a11y-danger-border: rgba(215, 173, 255, 0.82);
  --a11y-danger-bg: rgba(215, 173, 255, 0.24);
  --a11y-danger-text: #f0dcff;
  --accent: #6ac2ff;
}

html[data-a11y-color-profile="deuteranopia"] {
  --a11y-focus-outline: #ffdf6a;
  --a11y-success-border: rgba(102, 190, 255, 0.82);
  --a11y-success-bg: rgba(102, 190, 255, 0.26);
  --a11y-success-text: #d8eeff;
  --a11y-warning-border: rgba(255, 184, 112, 0.8);
  --a11y-warning-bg: rgba(255, 184, 112, 0.24);
  --a11y-warning-text: #ffedd6;
  --a11y-danger-border: rgba(203, 161, 255, 0.8);
  --a11y-danger-bg: rgba(203, 161, 255, 0.22);
  --a11y-danger-text: #efdeff;
  --accent: #65bbff;
}

html[data-a11y-color-profile="tritanopia"] {
  --a11y-focus-outline: #ffd07a;
  --a11y-success-border: rgba(92, 215, 206, 0.78);
  --a11y-success-bg: rgba(92, 215, 206, 0.24);
  --a11y-success-text: #dbfffb;
  --a11y-warning-border: rgba(255, 172, 126, 0.82);
  --a11y-warning-bg: rgba(255, 172, 126, 0.24);
  --a11y-warning-text: #ffe9d8;
  --a11y-danger-border: rgba(221, 160, 255, 0.82);
  --a11y-danger-bg: rgba(221, 160, 255, 0.2);
  --a11y-danger-text: #f4e0ff;
  --accent: #76c7ff;
}
