/* ============================================================
   ScriptTonic Design System V1 — Accessibility
   Focus-visible, reduced-motion, skip-link, screen-reader utilities.
   ============================================================ */

/* === FOCUS-VISIBLE === */
.st-focus-visible:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.st-focus-visible:focus-visible,
.st-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--st-focus-ring);
}

.st-btn:focus-visible,
.st-btn-icon:focus-visible,
.st-input:focus-visible,
.st-select:focus-visible,
.st-textarea:focus-visible,
.st-tab:focus-visible,
.st-page-link:focus-visible,
.st-dropdown-item:focus-visible {
  outline: none;
  box-shadow: var(--st-focus-ring);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .st-animated,
  .st-btn,
  .st-card,
  .st-dropdown,
  .st-modal,
  .st-tooltip,
  .st-skeleton {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .st-skeleton {
    animation: none !important;
  }
}

/* === SKIP LINK === */
.st-skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--st-space-4);
  z-index: calc(var(--st-z-tooltip) + 1);
  padding: var(--st-space-2) var(--st-space-4);
  background: var(--st-brand);
  color: var(--st-text-inverse);
  border-radius: var(--st-radius-md);
  font-weight: var(--st-font-semibold);
  text-decoration: none;
}

.st-skip-link:focus {
  inset-block-start: var(--st-space-4);
  color: var(--st-text-inverse);
}

/* === SCREEN READER === */
.st-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.st-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === DISABLED STATE === */
.st-disabled,
.st-btn:disabled,
.st-input:disabled,
.st-textarea:disabled,
.st-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* === TOUCH TARGET === */
.st-touch-target {
  min-width: var(--st-touch-target);
  min-height: var(--st-touch-target);
}

/* === STATUS PATTERNS (color is not sole indicator) === */
.st-status-success::before,
.st-status-warning::before,
.st-status-danger::before,
.st-status-info::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: var(--st-space-2);
}

.st-status-success::before { background-color: var(--st-success); }
.st-status-warning::before { background-color: var(--st-warning); }
.st-status-danger::before { background-color: var(--st-danger); }
.st-status-info::before { background-color: var(--st-interaction); }