/* ─────────────────────────────────────────
   DreamGIS v2 — Base / Reset / Typography
───────────────────────────────────────── */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--body-text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* Container */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Typography Scale ── */
.t-display-xl {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.12px;
}
.t-display-lg {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  line-height: 1.19;
  letter-spacing: -0.84px;
}
.t-display-md {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: -0.42px;
}
.t-title-lg { font-size: 18px; font-weight: 600; line-height: 1.33; }
.t-title-md { font-size: 16px; font-weight: 600; line-height: 1.25; }
.t-body-md  { font-size: 16px; font-weight: 400; line-height: 1.5; }
.t-body-sm  { font-size: 14px; font-weight: 400; line-height: 1.43; }
.t-caption  { font-size: 14px; font-weight: 500; line-height: 1.29; }
.t-badge    { font-size: 11px; font-weight: 700; line-height: 1.18; letter-spacing: 0.22px; }

/* Eyebrow tag */
.eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--sp-lg);
}
.eyebrow--primary { color: var(--primary); }
.eyebrow--white   { color: var(--on-dark); }

/* Color utilities */
.text-on-dark   { color: var(--on-dark); }
.text-on-canvas { color: var(--on-canvas); }
.text-muted     { color: var(--muted); }
.text-primary   { color: var(--primary); }
.text-teal      { color: var(--teal); }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }