/* ==========================================================================
   Plek Design System v6 — base
   Reset, type roles, grounds and the column-and-rule scaffolding.
   Load order: tokens.css → base.css → components.css → patterns.css → app.css (product UI only)
   ========================================================================== */

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

.pk-page {
  margin: 0;
  background: var(--pk-ground);
  color: var(--pk-ink);
  font-family: var(--pk-font-body);
  font-size: var(--pk-fs-body);
  line-height: var(--pk-lh-body);
  letter-spacing: var(--pk-ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* One font everywhere. Browsers do NOT let form controls inherit the page
   font (a bare <button> or <input> renders in Arial), and <code>/<kbd> fall to
   the system monospace. Both are pulled back into the system here, at zero
   specificity so any component rule still wins. */
:where(.pk-page) :where(button, input, select, textarea, optgroup) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* weights are 300 / 400 / 500 only */
:where(.pk-page) :where(b, strong) { font-weight: 500; }
:where(.pk-page) :where(code, kbd, samp, pre) {
  font-family: var(--pk-font-mono);
  font-size: inherit;          /* sizes come from the scale, never from an em fraction */
  letter-spacing: var(--pk-ls-body);
}

/* zero specificity: any single-class rule on an img/svg must be able to override this */
:where(.pk-page) :where(img, svg) { display: block; max-width: 100%; }

/* ---- type roles ---------------------------------------------------------
   Three faces, one job each:
   Space Grotesk speaks (headlines, nav). Space Mono counts (labels, numerals,
   durations). Inter explains (everything else; weight 300 only at stat size). */
.pk-display, .pk-h2, .pk-h3 {
  font-family: var(--pk-font-display);
  font-weight: 400;
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-display);
  color: var(--pk-ink);
  margin: 0;
  text-wrap: balance;
}
.pk-display { font-size: var(--pk-fs-display); }
.pk-h2 { font-size: var(--pk-fs-h2); }
.pk-h3 { font-size: var(--pk-fs-h3); }
.pk-accent { color: var(--pk-navy); }              /* the second line of a two-line headline */

.pk-statement {                                      /* CTA band line */
  font: 300 var(--pk-fs-display)/var(--pk-lh-tight) var(--pk-font-body);
  letter-spacing: var(--pk-ls-none); margin: 0; text-wrap: balance;
}
.pk-stat {                                           /* "10,000+ Employees", "$49.3M" */
  font: 300 var(--pk-fs-h2)/var(--pk-lh-tight) var(--pk-font-body);
  letter-spacing: var(--pk-ls-light); color: var(--pk-ink-strong); margin: 0;
}
.pk-quote {                                          /* testimonial body */
  font: 300 var(--pk-fs-h3)/var(--pk-lh-snug) var(--pk-font-body);
  letter-spacing: var(--pk-ls-light); color: var(--pk-ink); margin: 0;
}
.pk-title {                                          /* card title */
  font: 400 var(--pk-fs-title)/var(--pk-lh-tight) var(--pk-font-body);
  letter-spacing: var(--pk-ls-display); color: var(--pk-ink-strong); margin: 0;
}
.pk-lead  { font-size: var(--pk-fs-lead); line-height: var(--pk-lh-tight); letter-spacing: var(--pk-ls-body); color: var(--pk-ink-2); margin: 0; }
.pk-body  { font-size: var(--pk-fs-body); line-height: var(--pk-lh-body); letter-spacing: var(--pk-ls-body); color: var(--pk-ink-2); margin: 0; }
.pk-small { font-size: var(--pk-fs-small); line-height: var(--pk-lh-snug); letter-spacing: var(--pk-ls-body); color: var(--pk-ink-2); margin: 0; }
.pk-caption { font-size: var(--pk-fs-caption); line-height: var(--pk-lh-snug); letter-spacing: var(--pk-ls-body); color: var(--pk-muted); margin: 0; }

.pk-label {                                          /* "[ 03 / 06 ] • Why Plek" */
  font-family: var(--pk-font-mono);
  font-size: var(--pk-fs-label);
  line-height: var(--pk-lh-tight);
  letter-spacing: var(--pk-ls-body);
  color: var(--pk-muted);
  margin: 0;
  white-space: pre-wrap;
}
.pk-label__n { color: var(--pk-navy); font-weight: 400; }   /* Space Mono ships 400 only: never faux-bold a <b> */
.pk-numeral {                                        /* "1/" */
  font: 400 var(--pk-fs-h2)/var(--pk-lh-tight) var(--pk-font-mono);
  letter-spacing: var(--pk-ls-body); color: var(--pk-ink); margin: 0;
}
.pk-mono { font-family: var(--pk-font-mono); letter-spacing: var(--pk-ls-body); }
.pk-link { color: var(--pk-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pk-link:hover { color: var(--pk-blue-text); }

/* Responsive sizes come from tokens.css — the role classes never restate them. */

/* ---- scaffolding: full-bleed rules, one column, continuous side rails ---- */
.pk-col {
  width: var(--pk-col-width);
  max-width: var(--pk-col-max);
  margin-inline: auto;
  border-inline: var(--pk-line) solid var(--pk-rule);
}
.pk-section { position: relative; }
.pk-section--rule-top { border-top: var(--pk-line) solid var(--pk-rule); }
/* a full-bleed hairline band that holds a row of cells inside the railed column */
.pk-band { border-block: var(--pk-line) solid var(--pk-rule); }

/* ---- grounds ---- */
.pk-weave-navy  { background-color: var(--pk-navy); background-image: var(--pk-weave-navy); color: var(--pk-on-dark); }
.pk-weave-light { background-color: var(--pk-ground); background-image: var(--pk-weave-light); }
.pk-on-dark { color: var(--pk-on-dark); }
.pk-on-dark .pk-display, .pk-on-dark .pk-h2, .pk-on-dark .pk-h3, .pk-on-dark .pk-title, .pk-on-dark .pk-stat { color: var(--pk-on-dark); }
.pk-on-dark .pk-body, .pk-on-dark .pk-small, .pk-on-dark .pk-lead,
.pk-on-dark .pk-quote, .pk-on-dark .pk-numeral, .pk-on-dark .pk-statement { color: var(--pk-on-dark); }
.pk-on-dark .pk-caption, .pk-on-dark .pk-label { color: var(--pk-on-dark-2); }   /* 7.2:1 on navy */
.pk-on-dark .pk-label__n, .pk-on-dark .pk-accent { color: var(--pk-sky); }        /* 5.9:1 on navy */
.pk-on-dark .pk-link { color: var(--pk-on-dark); }
.pk-on-dark .pk-link:hover { color: var(--pk-sky); }

/* ---- a11y ---- */
.pk-page :focus-visible { outline: 2px solid var(--pk-ink); outline-offset: 2px; }
.pk-on-dark :focus-visible, .pk-weave-navy :focus-visible { outline-color: var(--pk-on-dark); }
.pk-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pk-page *, .pk-page *::before, .pk-page *::after { transition-duration: 0.01ms !important; animation: none !important; }
}