/* source: gsm-skeletons@34d2116 elements/wcag/a11y.css — vendored, do not edit; re-sync with scripts/sync-ui-kit.sh */
/**
 * a11y.css — WCAG 2.1 AA foundational styles
 * Provides focus rings, skip link, keyboard navigation, motion, and color contrast guidance.
 * Import in your main stylesheet or HTML <head>.
 */

/* ===== Focus visibility (critical for keyboard users) ===== */
:focus {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
}

button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus,
[role="button"]:focus,
[role="menuitem"]:focus,
[role="tab"]:focus,
[role="link"]:focus {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
}

/* For browsers that support :focus-visible (modern standard) */
:focus-visible {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ===== Skip link (visible on first Tab, skips to main content) ===== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #4a90e2;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}

/* ===== Reflow and zoom (no horizontal scroll at 320px or 200% zoom) ===== */
@media (max-width: 320px) {
  body {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media (prefers-text-spacing: more) {
  body {
    line-height: 1.8;
    letter-spacing: 0.12em;
    word-spacing: 0.16em;
  }
}

/* ===== Reduced motion (removes animations for vestibular disorders) ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Color scheme support =====
 * Deliberately no global body/a/button paint here. This file is linked by every
 * app, and unscoped `@media (prefers-color-scheme)` rules repainted each app's
 * body, links and every <button> (icon buttons included) in a fixed blue. Colour
 * comes from ui-primitives tokens.css, which each app re-points. */

/* ===== Semantic HTML defaults (button, link, input should be keyboard-accessible) ===== */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a[href],
select,
textarea,
[role="button"],
[role="menuitem"],
[role="tab"],
[role="link"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== Form labels (ensure visible and associated) ===== */
label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px; /* Prevents zoom-on-focus on iOS */
}

/* ===== Error states (must be visually distinct AND semantically marked) ===== */
[aria-invalid="true"],
input[aria-invalid="true"] {
  border-color: #d40000;
  background-color: #fff5f5;
}

[aria-invalid="true"]:focus {
  outline-color: #d40000;
}

/* ===== Live regions (for dynamic updates that should be announced) ===== */
[role="status"],
[role="alert"],
[aria-live="polite"],
[aria-live="assertive"] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== Decorative elements (should not be announced) ===== */
svg[aria-hidden="true"],
[aria-hidden="true"] {
  /* No special styling; just marking for AT */
}

/* ===== Contrast reference palette (adjust to your brand) ===== */
:root {
  /* Light theme */
  --text-primary: #1a1a1a;     /* 18:1 on #ffffff */
  --text-secondary: #4a4a4a;   /* 9:1 on #ffffff */
  --text-disabled: #9a9a9a;    /* 4.5:1 on #ffffff */

  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;

  --button-primary: #0066cc;   /* 6.5:1 on white, 4.5:1 on #f0f0f0 */
  --button-hover: #0052a3;

  --error: #d40000;            /* 5.1:1 on white */
  --success: #067d17;          /* 6.8:1 on white */
  --warning: #ea8800;          /* 5.5:1 on white */
  --info: #0066cc;             /* 6.5:1 on white */
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #e8e8e8;   /* 18:1 on #1a1a1a */
    --text-secondary: #b0b0b0; /* 9:1 on #1a1a1a */
    --text-disabled: #707070;  /* 4.5:1 on #1a1a1a */

    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;

    --button-primary: #5eb3f6; /* 8.3:1 on #1a1a1a */
    --button-hover: #88c7f7;

    --error: #ff6b6b;          /* 6.1:1 on #1a1a1a */
    --success: #51cf66;        /* 7.7:1 on #1a1a1a */
    --warning: #ffa94d;        /* 5.8:1 on #1a1a1a */
    --info: #5eb3f6;           /* 8.3:1 on #1a1a1a */
  }
}

/* ===== High contrast mode support ===== */
@media (prefers-contrast: more) {
  :root {
    --text-primary: #000000;
    --text-secondary: #333333;
    --button-primary: #000080;
  }
}