/* Shared design tokens — included by all teal-theme pages */
:root {
  --bg: #0a0e1a; --surface: #111827; --card: #1a2235;
  --accent: #00d4aa; --accent2: #ff6b35; --accent3: #ffd60a;
  --purple: #7c3aed; --text: #e8edf5;
  /* #a0abb8 — lifted from #8b95a8 so small-size labels (0.6rem–0.7rem)
     comfortably clear WCAG AA at ~8:1 on --bg and ~6:1 on --card */
  --muted: #a0abb8;
  --border: rgba(0,212,170,0.15);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; }
body { background:var(--bg); color:var(--text); overflow-x:hidden; }
body::before {
  content:''; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,212,170,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,170,0.03) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none; z-index:0;
}

/* ── Skip Navigation (M7) ───────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 99999;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: #0a0e1a;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ── Focus Visible (H1) ──────────────────────────────────────────────────── */
/* Shows a branded keyboard-focus ring; suppressed for pointer (mouse/touch)
   interactions where a visible ring is distracting and unnecessary. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  /* Modern browsers auto-follow border-radius, so no explicit radius needed */
}
/* Remove the UA default ring for pointer-activated focus */
:focus:not(:focus-visible) { outline: none; }

/* ── Reduced Motion (M4) ─────────────────────────────────────────────────── */
/* Respects the OS-level "Reduce Motion" preference (vestibular / epilepsy).
   0.01ms lets animations complete instantly so JS animationend listeners
   still fire, while infinite loops are stopped by iteration-count:1. */
@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;
  }
}