/* ============================================================
   PRIIME · BASE & UTILITY LAYER
   Foundational element defaults + the signature blueprint
   motifs as reusable utility classes. Built entirely on tokens.
   ============================================================ */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: var(--feat-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---------- Type utilities ---------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); color: var(--text-strong); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-semibold); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-medium); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-medium); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.mono { font-family: var(--font-mono); }
.metric { font-family: var(--font-mono); font-size: var(--fs-metric); line-height: var(--lh-metric); letter-spacing: var(--ls-metric); font-weight: var(--fw-semibold); }

/* Micro-label: 12px mono UPPERCASE +tracking — the engineered signature */
.micro, .t-micro {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Section kicker — "The modules // 02" pattern from priime.finance.
   Mono micro label; the slash-index carries the orange accent. */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kicker .idx { color: var(--o-500); }   /* wrap "// 01" in this */

/* ---------- Wordmark ---------- */
.wordmark { font-weight: var(--fw-semibold); letter-spacing: -.04em; color: var(--text-strong); line-height: 1; }
.wordmark .inf { color: var(--o-500); }   /* the ∞ over the "ii" */

/* ---------- Signature blueprint motifs ---------- */

/* Blueprint paper — dot grid (the marketing canvas) */
.blueprint-paper {
  background-color: var(--paper);
  background-image: var(--tex-dots);
  background-size: var(--tex-dots-size);
}

/* Blueprint grid — graph paper */
.blueprint-grid {
  background-color: var(--alu-50);
  background-image: var(--tex-grid);
  background-size: var(--grid-cell) var(--grid-cell);
}

/* Diagonal hatch — reserved / capacity / textural fill */
.hatch {
  background-image: var(--tex-hatch);
  border: 1px dashed var(--g-300);
}

/* Dot-matrix / perforated grille */
.dot-matrix {
  background-color: var(--k-800);
  background-image: var(--tex-matrix);
  background-size: 9px 9px;
  border-radius: var(--r-sm);
}

/* Barcode + model code micro-graphic */
.barcode {
  background: #fff;
  background-image: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 4px, #111 4px 5px, #fff 5px 9px, #111 9px 12px, #fff 12px 14px, #111 14px 15px, #fff 15px 19px);
}

/* Dashed registration corner brackets — frame a region like crop marks.
   Mark a container position:relative and drop four <span class="rc tl|tr|bl|br"> inside. */
.rc { position: absolute; width: 11px; height: 11px; border: 1.5px solid var(--o-500); }
.rc.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.rc.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.rc.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.rc.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Dashed rule with square node — section divider, wiring-diagram junction */
.rule { display: flex; align-items: center; gap: 0; margin: var(--sp-7) 0 var(--sp-5); }
.rule .line { flex: 1; border-top: 1px dashed var(--g-300); }
.rule .lit { flex: 0 0 56px; border-top: 1px dashed var(--o-500); }   /* one segment lights */
.rule .node { width: 7px; height: 7px; background: var(--k-800); }
.rule .t { font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); padding: 0 14px; }