/* School-DMS — reset + mobile-first base.
 * Sits between tokens.css and Tailwind preflight.
 */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings use the brand display face (Amaranth) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* iOS-zoom-on-focus prevention */
input, select, textarea {
  font-size: 16px;
}

/* Re-shrink slightly on roomier viewports for visual balance */
@media (min-width: 768px) {
  input, select, textarea {
    font-size: 15px;
  }
}

/* Focus rings — visible but not eye-stabbing */
:focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove default button styling so our components own the look */
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* All clickable controls get at least 44px tap targets */
[role="button"], a.tap, button.tap, input[type="submit"].tap {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}

/* Honour reduced-motion preference */
@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;
  }
}

/* HTMX swap indicator: shows ".htmx-request" only while a request is pending */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-request.htmx-indicator { display: inline-flex; }

/* Body padding so content never hides under the bottom tab bar */
.has-bottom-nav {
  padding-bottom: calc(var(--bottomnav-total) + var(--space-4));
}

/* Body padding for the sticky top bar on mobile */
.has-top-bar {
  padding-top: calc(var(--topbar-h) + var(--safe-top));
}