/* ============================================================
   DP TRAINING — BASE LAYER
   Light reset + element defaults bound to tokens + a small set of
   typographic / layout helper classes used across cards & kits.
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--white); color: var(--ink-950); }

/* ---- Typographic helpers --------------------------------- */
.dp-display {
  font-family: var(--display-family);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  text-transform: var(--display-transform);
  margin: 0;
}
.dp-heading {
  font-family: var(--heading-family);
  font-weight: var(--heading-weight);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  margin: 0;
}
.dp-eyebrow {
  font-family: var(--eyebrow-family);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  font-size: var(--eyebrow-size);
  color: var(--text-brand);
  margin: 0;
}
.dp-body { font-family: var(--font-body); line-height: var(--leading-relaxed); }
.dp-italic { font-style: italic; }

/* Accent slash before eyebrow labels — echoes the logo's slant */
.dp-eyebrow--bar { display: inline-flex; align-items: center; gap: var(--space-3); }
.dp-eyebrow--bar::before {
  content: "";
  width: 28px; height: 3px;
  background: var(--white);
  transform: skewX(var(--slant-deg));
}

/* ---- Layout helpers -------------------------------------- */
.dp-container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-6); }
.dp-clip { clip-path: var(--clip-slant); }
.dp-slant { transform: skewX(var(--slant-deg)); }
.dp-slant > * { transform: skewX(calc(-1 * var(--slant-deg))); }

/* Diagonal-line industrial texture overlay (use on dark blocks) */
.dp-texture { position: relative; }
.dp-texture::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.6) 0 1px,
    transparent 1px 9px
  );
  opacity: var(--texture-opacity);
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}