/* ═══════════════════════════════════════════════════════════════
   SHIBARMY.IO — GLOBAL TYPOGRAPHY TOKEN SYSTEM
   Single source of truth for type scale, weights and families.
   Link this on every page, in <head>, BEFORE the page's own <style>
   block, so page-level CSS can still reference these tokens (and, for
   documented exceptions, override them locally — but pages must not
   invent new arbitrary font-size values).

   This file intentionally does NOT set component styles (no .card,
   .btn, etc.) — it only defines the scale. Pages keep their own
   layout/animation/component CSS untouched; they just point their
   existing font-size declarations at these variables instead of
   hardcoded px.

   Montserrat = human/community layer (UI, navigation, headings, body).
   JetBrains Mono = machine/intelligence layer (data, metrics, IDs,
   timestamps, wallet addresses, code, system status).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Families ── */
  --font-primary: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Weights ── */
  --fw-light: 300;    /* hero/display text, atmospheric statements only */
  --fw-regular: 400;  /* body copy, descriptions */
  --fw-medium: 500;   /* navigation, tabs, secondary UI */
  --fw-semibold: 600; /* card titles, buttons, labels */
  --fw-bold: 700;     /* major headings, key metrics only */

  /* ── Type scale — desktop ── */
  --text-display: 48px;
  --text-h1: 40px;
  --text-h2: 30px;
  --text-h3: 22px;
  --text-card-title: 18px;
  --text-body-lg: 16px;
  --text-body: 15px;
  --text-body-sm: 14px;
  --text-label: 12px;
  --text-meta: 11px;
  --text-micro: 10px;
  --text-metric-xl: 36px;
  --text-metric-lg: 30px;
  --text-metric-md: 24px;

  /* ── Line heights ── */
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.55;
  --lh-label: 1.2;

  /* ── Letter spacing ── */
  --ls-display: -0.02em;
  --ls-nav: 0;
  --ls-label: 0.06em;
}

/* ── Type scale — mobile / tablet ── */
@media (max-width: 768px) {
  :root {
    --text-display: 34px;
    --text-h1: 30px;
    --text-h2: 25px;
    --text-h3: 20px;
    --text-card-title: 17px;
    --text-body-lg: 15px;
    --text-body: 14px;
    --text-body-sm: 13px;
    --text-label: 11px;
    --text-meta: 10px;
    --text-micro: 9px;
    --text-metric-xl: 30px;
    --text-metric-lg: 26px;
    --text-metric-md: 22px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MAPPING GUIDE (for anyone editing a page's own CSS)
   Old hardcoded value seen sitewide → token to use instead
   ───────────────────────────────────────────────────────────────
   44–52px display/hero text          → var(--text-display)
   36–42px page title (H1)            → var(--text-h1)
   26–32px section heading (H2)       → var(--text-h2)
   20–24px sub-heading (H3)           → var(--text-h3)
   17–19px card/panel title           → var(--text-card-title)
   16px lead body / intro copy        → var(--text-body-lg)
   14–15px standard body copy         → var(--text-body)
   13px dense body / secondary copy   → var(--text-body-sm)
   11–12px labels, buttons, nav       → var(--text-label)
   10–11px metadata, timestamps       → var(--text-meta)
   8–9px micro tags, badges           → var(--text-micro)
   32–40px large dashboard metric     → var(--text-metric-xl)
   26–30px medium metric              → var(--text-metric-lg)
   20–24px small metric               → var(--text-metric-md)

   Any font-size that doesn't map cleanly to one of the above is a
   candidate for a documented component-specific exception — leave a
   short CSS comment explaining why, rather than inventing a new
   unlabeled value.
   ═══════════════════════════════════════════════════════════════ */