/* =========================================================
   SKILDGRAD · Base
   Reset + body defaults + typography utility classes.
   No components, no layouts.
   ========================================================= */

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--w-regular);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}
img, svg, video{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea{ font: inherit; color: inherit; }
ul, ol{ list-style: none; }
hr{ border: 0; border-top: 1px solid var(--border); }

/* Headings inherit weight/tracking from utility classes, not from tags */
h1, h2, h3, h4, h5, h6{ font-weight: var(--w-medium); }
em{ font-style: normal; color: var(--fg-muted); font-weight: var(--w-medium); }
strong{ font-weight: var(--w-medium); }

/* Selection and focus */
::selection{ background: var(--ink); color: var(--paper-2); }
:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Typography utilities ---- */
.t-display{
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-track);
  font-weight: var(--w-medium);
  color: var(--fg);
}
.t-h1{
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-track);
  font-weight: var(--w-medium);
  color: var(--fg);
}
.t-h2{
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-track);
  font-weight: var(--w-medium);
  color: var(--fg);
}
.t-h3{
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-track);
  font-weight: var(--w-medium);
  color: var(--fg);
}
.t-h4{
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  letter-spacing: var(--t-h4-track);
  font-weight: var(--w-medium);
  color: var(--fg);
}
.t-body{
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg);
}
.t-small{
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--fg);
}
.t-micro{
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  letter-spacing: var(--t-micro-track);
  color: var(--fg-subtle);
}

/* Eyebrow — the system's signature typographic device */
.eyebrow{
  display: inline-block;
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-track);
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: var(--w-medium);
}

/* Lede — the paragraph under an h1 or h2 */
.lede{
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 60ch;
}
@media (max-width: 720px){ .lede{ font-size: 16px; } }

/* Muted body paragraph */
.muted{ color: var(--fg-muted); }
.subtle{ color: var(--fg-subtle); }

/* Inline text link */
.tlink{
  color: var(--fg);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--t-fast) var(--ease);
}
.tlink:hover{ color: var(--accent); }