/* ============================================================
   RŌZ Hair — Base — resets, fonts, typography primitives.
   Depends on tokens.css.
   ============================================================ */

/* Web fonts are imported in tokens.css — no duplicate needed here. */

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

html, body {
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-sans);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--roz-seaglass); color: var(--roz-black); }

/* ---------- Typography primitives ---------- */
.h1, h1 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0;
}
.h2, h2 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin: 0;
}
.h3, h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin: 0;
}
.h4, h4 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  margin: 0;
}

@media (max-width: 768px) {
  .h1, h1 { font-size: var(--fs-h1-mob); }
  .h2, h2 { font-size: var(--fs-h2-mob); }
}

/* ---------- Eyebrow / Label ---------- */
.eyebrow,
.eyebrow-l {
  font-family: var(--ff-label);
  font-size: var(--fs-eyebrow-l);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.eyebrow-m {
  font-family: var(--ff-label);
  font-size: var(--fs-eyebrow-m);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- Paragraph utility classes ---------- */
.p-l   { font-family: var(--ff-sans); font-size: var(--fs-body-l); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 400; }
.p-l-m { font-family: var(--ff-sans); font-size: var(--fs-body-l); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: 500; }
.p-m   { font-family: var(--ff-sans); font-size: var(--fs-body-m); line-height: var(--lh-body); letter-spacing: var(--ls-body-s); font-weight: 400; }
.p-s   { font-family: var(--ff-sans); font-size: var(--fs-body-s); line-height: var(--lh-body); letter-spacing: var(--ls-body-s); font-weight: 400; }

/* ---------- CTA label text (inside buttons/links) ----------
   ALL CAPS, tracked +7%. Mirrors .cta-m / .cta-s in tokens.css.
   The V2 lowercase variant was retired in V3 — see brand spec. */
.cta-m { font-family: var(--ff-sans); font-size: var(--fs-cta-m); line-height: var(--lh-body); letter-spacing: var(--ls-eyebrow); font-weight: 400; text-transform: uppercase; }
.cta-s { font-family: var(--ff-sans); font-size: var(--fs-cta-s); line-height: var(--lh-body); letter-spacing: var(--ls-eyebrow); font-weight: 400; text-transform: uppercase; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter-desktop);
}
@media (max-width: 768px) {
  .container { padding-inline: var(--gutter-mobile); }
}