/* ─── base ─────────────────────────────────────────────────────────── */

body {
  background-color: var(--canvas);
  background-image:
    linear-gradient(rgba(90, 200, 236, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 200, 236, 0.06) 1px, transparent 1px),
    radial-gradient(900px 600px at 50% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1100px 700px at 50% 100%, rgba(202, 214, 228, 0.45), transparent 60%);
  background-size: 32px 32px, 32px 32px, auto, auto;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

h1, h2, h3, .nav-brand, .target-current { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-weight: 600; }
h2 { font-weight: 600; }

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

.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Eyebrow / micro-label — used as panel-head titles, section labels */
.eyebrow, .section-heading {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ─── empty state ──────────────────────────────────────────────────── */

.empty {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 1rem 0;
}