/* HolonomiX - Base layer & brand utilities
   ==================================================================
   Element defaults + a few structural helpers the brand leans on:
   blueprint grid backgrounds, eyebrow/coordinate labels, corner
   brackets. Kept intentionally small.
*/

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-page);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--hx-teal); color: var(--hx-ink-900); }

a { color: var(--text-link); text-decoration: none; }

/* ---- Display / heading helpers ---- */
.hx-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--tk-display-2);
  line-height: var(--lh-display-2);
  text-transform: none;
}
.hx-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--tk-h1); }
.hx-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--tk-h2); }

/* ---- Eyebrow / coordinate label ---- */
.hx-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hx-eyebrow--accent { color: var(--text-primary); }
.hx-eyebrow::before { content: "// "; color: var(--accent); }

/* ---- Mono metadata ---- */
.hx-mono { font-family: var(--font-mono); font-size: var(--fs-mono); }

/* ---- Blueprint grid background ---- */
.hx-grid {
  background-image: var(--grid-bg);
  background-size: var(--grid-size) var(--grid-size);
}

/* ---- Corner brackets (structural framing) ---- */
.hx-bracket { position: relative; }
.hx-bracket::before,
.hx-bracket::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: var(--accent); border-style: solid;
}
.hx-bracket::before { top: -1px; left: -1px; border-width: var(--bw-strong) 0 0 var(--bw-strong); }
.hx-bracket::after  { bottom: -1px; right: -1px; border-width: 0 var(--bw-strong) var(--bw-strong) 0; }