/* ============================================================
   NEXHA HAIRTECH — BASE LAYER
   Light element resets + a handful of brand utility classes.
   Components and kits rely on the tokens; this gives raw HTML
   and specimen cards a sensible on-brand default.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--text-primary);
}

p { margin: 0; }

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

::selection { background: var(--c-black); color: var(--c-white); }
.nx-dark ::selection, [data-theme="dark"] ::selection { background: var(--c-white); color: var(--c-black); }

/* --- Brand utility classes --- */

.nx-eyebrow {
  font-family: var(--font-text);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}

.nx-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.nx-mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  letter-spacing: var(--type-mono-ls);
  font-variant-numeric: tabular-nums;
}

/* The thin horizontal section rule used across the deck */
.nx-rule {
  border: 0;
  border-top: var(--bw-rule) solid var(--border-default);
  margin: 0;
}

/* Left accent bar for callouts / quotes (the "surgical cut") */
.nx-tick {
  border-left: var(--bw-thick) solid var(--text-primary);
  padding-left: var(--sp-4);
}

/* Tagline lockup */
.nx-tagline {
  font-family: var(--font-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.nx-canvas-dark {
  background: var(--c-ink);
  color: var(--c-white);
}