/* ==========================================================================
   GATE PASS — Base / Reset / Accessibility
   Gate Pass base — light surface, Inter typography.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }

/* Ensure [hidden] always wins over author display rules */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Inter alternates */
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--brand-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p { max-width: 72ch; }

/* ---- Accessibility ---- */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.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;
}

.skip-link {
  position: absolute; top: var(--space-2); left: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transform: translateY(-150%);
  transition: transform var(--duration-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

/* ---- Boot error banner ---- */
.boot-error {
  position: fixed; inset-inline: 0; top: 0;
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-inverse);
  background: var(--color-danger);
  text-align: center;
}

/* ---- Utility keyframes ---- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

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

@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; box-shadow: none; }
}