/* ── Reset & Base — Spoonfull Crash Companion™ ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* ── Interactive Defaults ───────────────────────────────────────────────── */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

/* ── Focus Visible ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--periwinkle);
  outline-offset: 2px;
}

/* ── Skip Link (Accessibility) ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

#main {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@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;
  }
}