/* ============================================================
   Xier — Base reset + element defaults + utility classes
   Consumers linking styles.css get a usable, on-brand baseline.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
}

::selection { background: var(--color-selection-bg); color: var(--color-selection-fg); }

h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: var(--fw-regular); }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* --- Type utility classes --------------------------------- */
.x-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-regular); }
.x-display    { font-size: var(--fs-display);    line-height: var(--lh-tight);   letter-spacing: var(--ls-display); }
.x-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.x-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
.x-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.x-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.x-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.x-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.x-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.x-caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--color-text-secondary); }

/* Mono technical label — the signature eyebrow/date/spec style */
.x-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
.x-label-sm { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: var(--ls-label-sm); text-transform: uppercase; line-height: var(--lh-snug); }

.x-mono { font-family: var(--font-mono); }
.x-accent { color: var(--color-accent); }
.x-primary { color: var(--color-primary); }