/* F2 Technologies — Base element styles & a few brand utilities.
   Dark mode is the default surface. */

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

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

/* ---- Display & headings ---- */
.f2-display {
  font-family: var(--f2-font-display);
  font-weight: var(--f2-fw-bold);
  font-size: var(--f2-size-display);
  line-height: var(--f2-lh-display);
  letter-spacing: var(--f2-ls-display);
  text-wrap: balance;
}
.f2-h1 {
  font-family: var(--f2-font-display);
  font-weight: var(--f2-fw-bold);
  font-size: var(--f2-size-h1);
  line-height: var(--f2-lh-h1);
  letter-spacing: var(--f2-ls-h1);
  text-wrap: balance;
}
.f2-h2 {
  font-family: var(--f2-font-display);
  font-weight: var(--f2-fw-semibold);
  font-size: var(--f2-size-h2);
  line-height: var(--f2-lh-h2);
  letter-spacing: var(--f2-ls-h2);
}
.f2-h3 {
  font-family: var(--f2-font-display);
  font-weight: var(--f2-fw-semibold);
  font-size: var(--f2-size-h3);
  line-height: var(--f2-lh-heading);
  letter-spacing: var(--f2-ls-tight);
}
.f2-body { font-size: var(--f2-size-body); line-height: var(--f2-lh-body); }
.f2-caption {
  font-size: var(--f2-size-caption);
  line-height: var(--f2-lh-caption);
  font-weight: var(--f2-fw-medium);
  color: var(--f2-text-muted);
}

/* ---- Mono — the technical signal ---- */
.f2-mono-label {
  font-family: var(--f2-font-mono);
  font-weight: var(--f2-fw-medium);
  font-size: var(--f2-size-mono-label);
  letter-spacing: var(--f2-ls-mono-label);
  text-transform: uppercase;
  color: var(--f2-text-muted);
}
.f2-mono { font-family: var(--f2-font-mono); }

/* ---- The active node + block cursor ---- */
.f2-node {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--f2-accent);
}
.f2-cursor {
  display: inline-block;
  width: 0.55em; height: 1.05em;
  vertical-align: text-bottom;
  background: var(--f2-accent);
  animation: f2-blink 1.1s steps(1) infinite;
}
@keyframes f2-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .f2-cursor { animation: none; }
}

/* Accent text — uses the foreground accent role (darkens to amber-deep on light for AA) */
.f2-accent-text { color: var(--f2-accent-text); }

a { color: var(--f2-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }