/* ──────────────────────────────────────────────────────────────
   Kinetika — Base element styles & utility primitives
   Light-touch resets + a few brand text/element conventions.
   ────────────────────────────────────────────────────────────── */

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

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

/* Display / headlines — Cinzel */
.k-display,
h1.k, h2.k, h3.k {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}
.k-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); }
.k-display-lg { font-size: var(--fs-display-lg); }
.k-display-md { font-size: var(--fs-display-md); }
.k-display-sm { font-size: var(--fs-display-sm); }

/* Eyebrow — wide-tracked uppercase label, the brand's signature meta tag */
.k-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

/* The copper tick that sits under eyebrows / numbers in the brand book */
.k-tick {
  display: block;
  width: var(--rule-eyebrow-w);
  height: var(--rule-thick);
  background: var(--copper-500);
  border: 0;
  margin: var(--space-3) 0 0;
}

/* Body conventions */
.k-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  font-weight: var(--fw-regular);
}
.k-prose { max-width: var(--container-prose); }
.k-prose p { margin: 0 0 var(--space-5); text-wrap: pretty; }

/* Philosophy lockup */
.k-philosophy {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-philosophy);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.k-philosophy .resolver { color: var(--copper-500); }

a { color: var(--copper-600); text-decoration: none; }
a:hover { color: var(--copper-700); }

::selection { background: var(--copper-100); color: var(--ink-900); }