/* ==========================================================================
   Lake Mead Admin — Reset & Base Typography
   Consumes tokens.css. No literal colors below this line.
   ========================================================================== */

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Theme switching animates the whole surface rather than snapping. */
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Headings carry the portfolio's heavy-weight, tight-tracked treatment. */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-snug);
  line-height: 1.25;
  color: var(--ink);
}
h1 { font-size: var(--fs-3xl); letter-spacing: var(--track-tight); }
h2 { font-size: var(--fs-2xl); letter-spacing: var(--track-tight); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
h6 { font-size: var(--fs-base); font-weight: var(--fw-bold); }

/* `.display` opts a heading into Playfair — reserved for top-level page
   titles and marketing surfaces, never for card headers. */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: normal;
}

/* `.serif` opts into Lora, the mid-size display serif — roughly 17-28px, where
   Playfair's hairlines start to break up but a serif still adds warmth:
   subheads, pull quotes, an editorial card title. Saves writing the inline
   font-family/weight/tracking trio each time. See --font-accent in tokens.css
   for the size boundary and the 700-weight ceiling. */
.serif {
  font-family: var(--font-accent);
  font-weight: var(--fw-semi);
  letter-spacing: -.01em;
}
.serif-bold {
  font-family: var(--font-accent);
  font-weight: var(--fw-bold);   /* 700 — Lora's ceiling; never 800 */
  letter-spacing: -.015em;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--t-base) var(--ease);
}
a:hover { color: var(--blue-deep); }

strong, b { font-weight: var(--fw-bold); }
small { font-size: var(--fs-xs); }

code, kbd, pre, samp, .mono {
  font-family: var(--font-mono);
  font-size: .92em;
}
code {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
}
pre {
  margin: 0;
  padding: var(--sp-4);
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--surface-alt);
  border: 1px solid var(--line);
}
pre code { padding: 0; border: 0; background: none; }

img, svg, video, canvas { display: block; max-width: 100%; }

/* The browser's own [hidden] rule is `display: none` at the lowest possible
   specificity, so ANY author rule that sets display beats it and the element
   stays on screen with `hidden` still on it. That shipped twice here — both
   search empty-states used `display: flex` and showed permanently. This is the
   one place to fix it, and !important is correct: `hidden` is a statement
   about whether the element exists to the reader, not a style suggestion. */
[hidden] { display: none !important; }
hr { height: 1px; margin: var(--sp-5) 0; border: 0; background: var(--line); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Tabular numerals everywhere numbers are compared vertically. */
.num, .stat-value, td.num, th.num { font-variant-numeric: tabular-nums; }

/* --- Focus ---------------------------------------------------------------
   One visible ring for keyboard users, suppressed for mouse users. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* --- Selection ------------------------------------------------------------ */
::selection { background: var(--aqua); color: var(--on-accent); }

/* --- Scrollbars ----------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); background-clip: content-box; }

/* --- Accessibility helpers ------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: var(--sp-4);
  top: -80px;
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  background: var(--aqua);
  color: var(--on-accent);
  font-weight: var(--fw-heavy);
  box-shadow: var(--shadow-md);
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--on-accent); }

/* --- Scroll reveal (ported from an earlier portfolio project) -------------
   Elements start displaced; reveal.js adds .is-visible via IntersectionObserver.
   Without JS nothing is hidden, because .reveal-ready is set by that script. */
.reveal-ready .scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.scroll-reveal {
  transition: opacity var(--t-slow) var(--ease-reveal),
              transform var(--t-slow) var(--ease-reveal);
}
.scroll-reveal.is-visible { opacity: 1; transform: none; }

/* Motion is decoration here; every reveal has a static resting state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-ready .scroll-reveal { opacity: 1; transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .backdrop, .skip-link, .no-print { display: none !important; }
  .app { padding: 0 !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}