/* ============================================================
   Mesh With Texas — brand tokens
   Drop this in first; everything else references these.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* --- core field + ink --- */
  --mwt-dusk:        #101826;  /* dark field */
  --mwt-caliche:     #EFE9DC;  /* light field */
  --mwt-ink:         #161F2E;  /* silhouette + type on light */
  --mwt-brass:       #E8A73C;  /* silhouette + type on dark */
  --mwt-rule:        #22304A;  /* hairlines, borders on dark */
  --mwt-muted:       #8494AC;  /* secondary text on dark */

  /* --- the lit hub node (logo mode: exactly one) --- */
  --mwt-signal:      #45C9A6;  /* on dark */
  --mwt-signal-lt:   #0E8A6E;  /* on light */

  /* --- node palette (graphics only, never the profile mark) --- */
  --mwt-node-1: #F1701F;  /* orange  — panhandle */
  --mwt-node-2: #B06A4E;  /* clay    — north central */
  --mwt-node-3: #9DB528;  /* lime    — east */
  --mwt-node-4: #1BA890;  /* teal    — hub */
  --mwt-node-5: #7C4C86;  /* plum    — west */
  --mwt-node-6: #F2C41F;  /* yellow  — south central */
  --mwt-node-7: #DC4356;  /* red     — tail */

  /* --- type --- */
  --mwt-font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --mwt-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Display face: names, headings, wordmarks, labels.
   Saira Condensed runs narrow — give it tracking or it reads cramped. */
h1, h2, h3, .mwt-display {
  font-family: var(--mwt-font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;   /* optional; the wordmark is set in caps */
}

/* Mono is reserved for real technical content only:
   frequencies, specs, telemetry, coordinates, node IDs, timestamps.
   It is not a decorative face. */
.mwt-spec, code, kbd, .mwt-telemetry {
  font-family: var(--mwt-font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Body copy is NOT Saira Condensed — it's too narrow at paragraph length.
   Use a normal-width system stack and let the display face do the work. */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--mwt-dusk);
  color: var(--mwt-caliche);
}

/* ---------- horizontal lockup, built with live text ----------
   Preferred over the flattened SVG lockup on the web: the type stays
   selectable, scalable, and translatable. Pair .mwt-lockup__mark with
   the mark SVG (see mwt-mark.svg). */
.mwt-lockup { display: flex; align-items: center; gap: 18px; }
.mwt-lockup__mark { width: 72px; height: 72px; flex: none; }
.mwt-lockup__name {
  font-family: var(--mwt-font-display);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mwt-brass);
}
.mwt-lockup__spec {
  font-family: var(--mwt-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mwt-muted);
  margin-top: 7px;
}