/* ППЧ — base layer: resets + brand defaults + a few utility classes.
   Imported last so it can rely on the token layers above. */

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

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

body {
  margin: 0;
  font: var(--type-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-heading); color: var(--text-primary); }

a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--ppch-turquoise-soft); color: var(--ppch-deep); }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Brand type helpers ---- */
.ppch-display-1 { font: var(--type-display-1); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.ppch-display-2 { font: var(--type-display-2); letter-spacing: var(--tracking-display); text-transform: uppercase; }
.ppch-h1 { font: var(--type-h1); letter-spacing: var(--tracking-heading); }
.ppch-h2 { font: var(--type-h2); letter-spacing: var(--tracking-heading); }
.ppch-h3 { font: var(--type-h3); letter-spacing: var(--tracking-heading); }
.ppch-h4 { font: var(--type-h4); }
.ppch-h5 { font: var(--type-h5); }
.ppch-body-lg { font: var(--type-body-lg); }
.ppch-body { font: var(--type-body); }
.ppch-body-sm { font: var(--type-body-sm); }
.ppch-overline {
  font: var(--type-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ---- Brand graphic helpers (hand-drawn turquoise strokes) ---- */
.ppch-stroke { display: block; pointer-events: none; user-select: none; }