/* ═══════════════════════════════════════════════════════════
   BASE — Bureau Arvö
   Page defaults + the architectural background grid.
   ═══════════════════════════════════════════════════════════ */

html {
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* Architectural background grid — faint vertical rules, like a drafting sheet.
   Apply by adding class .arvo-gridfield to a full-bleed container, or to body. */
.arvo-gridfield {
  position: relative;
}
.arvo-gridfield::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(25% - 0.5px),
    var(--arvo-line-faint) calc(25% - 0.5px),
    var(--arvo-line-faint) calc(25% + 0.5px),
    transparent calc(25% + 0.5px)
  );
}

/* Hairline rules */
.arvo-hairline {
  border: none;
  height: 1px;
  background: var(--border-hairline);
  margin: var(--space-6) 0;
}
.arvo-rule-accent {
  width: 3rem;
  height: 2px;
  background: var(--role-decision);
  border: none;
}