/* ============================================================================
 * base.css — reset + global defaults + small reusable helpers.
 * Load AFTER tokens.css (it relies on the variables defined there).
 * ========================================================================== */

/* 1) Reset: make every element predictable.
 *    border-box = padding/border counted INSIDE width (prevents overflow bugs). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The HTML `hidden` attribute must always win. Some components set a `display`
 * (e.g. `.field { display:flex }`) whose specificity ties the UA `[hidden]`
 * rule, leaving hidden elements visible (that's how an empty "Devise" select
 * used to show). `!important` guarantees `hidden` actually hides. */
[hidden] { display: none !important; }

/* 2) Root font-size 16px. We size things in rem (1rem = 16px) so the layout
 *    respects the user's browser font-size setting (accessibility). */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;            /* dvh = real viewport height on mobile (no nav-bar gap) */
  touch-action: manipulation;     /* removes the 300ms tap delay on mobile */
  -webkit-font-smoothing: antialiased;
}

/* 3) Media should never overflow its container. */
img, svg, video { display: block; max-width: 100%; }

/* 4) Forms inherit the body font (browsers don't do this by default). */
input, button, textarea, select { font: inherit; color: inherit; }

/* 5) Headings: Inter for UI by default; use .brand for the Cinzel serif. */
h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* 6) Links use the accessible bronze, not raw gold. */
a { color: var(--gold-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 7) Numbers (prices, dates, counts) line up and don't jitter when they change. */
.tabular { font-variant-numeric: tabular-nums; }

/* 8) Brand display text (logo wordmark, login title). */
.brand { font-family: var(--font-brand); letter-spacing: .02em; }

/* 9) Keyboard focus: always visible. We use :focus-visible so it shows for
 *    keyboard users but not on every mouse click. NEVER remove this. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 10) Screen-reader-only: hidden visually, still read by assistive tech.
 *     Use for labels/text that must exist for accessibility but not be seen. */
.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;
}

/* 11) Centered content container with breathing room that grows on big screens. */
.container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 768px)  { .container { padding-inline: var(--sp-6); } }
@media (min-width: 1280px) { .container { padding-inline: var(--sp-10); } }

/* 12) Respect users who ask for less motion (vestibular comfort / accessibility). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}