/* ==========================================================================
   base.css — reset, typography, atmosphere, layout primitives, utilities
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  /* v2: flat two-tone canvas — no gradients, no texture. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  font-weight: 700;
}
h1 { font-size: var(--fs-3xl); letter-spacing: var(--track-tight); font-weight: 800; }
h2 { font-size: var(--fs-2xl); letter-spacing: var(--track-tight); font-weight: 800; }
h3 { font-size: var(--fs-xl);  letter-spacing: var(--track-snug); }
h4 { font-size: var(--fs-lg);  letter-spacing: var(--track-snug); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: padding-box; }

/* v2: grain removed — .grain is a no-op so existing markup stays harmless. */
.grain::after { content: none; }

/* ---------- Type helpers ---------- */
.display { font-family: var(--font-display); }
/* Data/figures use the monospace face for a sharp, tabular data feel. */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-strong { color: var(--text-strong); }
.text-success { color: var(--success); } .text-danger { color: var(--danger); }
.text-warning { color: var(--warning); } .text-primary { color: var(--primary); }
.text-center { text-align: center; } .text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Layout primitives ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }
.grow { flex: 1 1 auto; min-width: 0; }
.hidden { display: none !important; }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.w-full { width: 100%; }

.grid { display: grid; gap: var(--sp-5); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auto-fit { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

@media (max-width: 1100px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Staggered page-load reveal (transform + opacity only) */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise var(--dur-slow) var(--ease-out) both; }
.reveal-1 { animation-delay: 40ms; } .reveal-2 { animation-delay: 90ms; }
.reveal-3 { animation-delay: 140ms; } .reveal-4 { animation-delay: 190ms; }
.reveal-5 { animation-delay: 240ms; } .reveal-6 { animation-delay: 290ms; }