/* ============================================================
   gcommand · LEGACY BRIDGE  (TEMPORARY — delete when retired)
   ------------------------------------------------------------
   The pages were authored against the old "Engineering Calm"
   tokens (--fg, --font-serif, --space-N, .sublabel, .caps,
   .rule, .btn, tables, pre…). This file maps those names and
   re-skins those content elements onto the G — Design Language
   so every page renders coherently the moment we swap shells,
   BEFORE each page is hand-polished into proper G idiom.

   It is a migration aid, not a layer to keep. As each page is
   converted to native G tokens/classes, drop its reliance on
   these aliases; when the last page is done, delete this file
   and its <link> in shell.html.  (See the reskin plan.)
   ============================================================ */

/* -------- 1. Legacy token aliases --------------------------
   Only names the pack does NOT already define are set here, so
   we never clobber a live G token (e.g. --bg, --accent, --t-xs,
   --t-sm, --t-lg, --font-mono, --gutter, --shadow keep G's). */
:root {
  /* Type families — everything is mono now. */
  --font-serif: var(--font-body);
  --font-sans:  var(--font-body);

  /* Text colors */
  --fg:        var(--text);
  --fg-muted:  var(--text-muted);
  --fg-faint:  var(--text-faint);
  --fg1: var(--text);
  --fg2: var(--text-muted);
  --fg3: var(--text-faint);
  --link: var(--accent);

  /* Surfaces */
  --bg-sunk: var(--bg-panel);
  --bg-ink:  #1c1e22;   /* dark code-block surface (theme-independent) */
  --fg-on-ink: #e8e4d8;
  --fg-on-ink-muted: #8a8578;

  /* Rules / borders */
  --rule: var(--border);
  --rule-thin: var(--bw) solid var(--border);
  --border-1: var(--bw) solid var(--text);
  --accent-alt: var(--chart-2);

  /* Type sizes the pack lacks (G omits these names) */
  --t-base:    var(--t-md);    /* old 19px body → 16px mono */
  --t-h3:      var(--t-d4);    /* 26px */
  --t-h2:      1.75rem;        /* 28px */
  --t-h1:      2rem;           /* 32px */
  --t-display: 2.5rem;         /* 40px */

  /* Line-heights / weights the pack lacks */
  --lh-loose:  1.75;
  --w-medium:  500;
  --w-semi:    600;

  /* Spacing — old 8/16/24/32/48/64/96 → 8px lattice */
  --space-1: var(--s-2);
  --space-2: var(--s-4);
  --space-3: var(--s-5);
  --space-4: var(--s-6);
  --space-5: var(--s-7);
  --space-6: var(--s-8);
  --space-7: var(--s-9);

  /* Layout widths (kept) */
  --measure:      680px;
  --measure-wide: 760px;

  /* Square everything */
  --radius-0: 0;
  --radius-1: 0;
}

/* -------- 2. Content element re-skin -----------------------
   Scoped to .site-main so page CONTENT keeps the structure it
   was written against, without fighting the console chrome.
   These mirror the old tokens.css semantic styles, re-pointed
   at G tokens. base.css already styles bare h1–h4 huge/upper;
   we tame them to page-content scale here. */

.site-main h1, .site-main .h1 {
  font: var(--w-black) var(--t-h1)/1.1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--text-hot);
  margin: 0 0 var(--s-4);
}
/* Old h2 = small sans-caps section label. Preserve that role. */
.site-main h2, .site-main .h2 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
  margin: var(--s-7) 0 var(--s-4);
}
.site-main h3, .site-main .h3 {
  font: var(--w-bold) 1.25rem/1.25 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--text-hot);
  margin: var(--s-6) 0 var(--s-4);
}

.site-main .sublabel {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin: 0 0 var(--s-5);
}

.site-main p { margin: 0 0 var(--s-5); max-width: var(--measure-wide); }

/* Content links follow the core G behaviour: accent colour is the signal,
   underline only on hover. (Underlining every link by default made block
   links like the drive cards look noisy.) */
.site-main a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
.site-main a:hover { text-decoration: underline; }

.site-main .meta, .site-main small {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
}

.site-main .caps {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.site-main .btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--accent);
  background: transparent;
  border: var(--bw) solid var(--accent);
  border-radius: 0;
  padding: 9px 18px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-main .btn:hover { background: var(--accent); color: var(--accent-on); text-decoration: none; }

.site-main hr, .site-main .rule {
  border: 0;
  border-top: var(--bw) solid var(--border);
  margin: var(--s-6) 0;
}

.site-main code, .site-main kbd, .site-main samp { font-family: var(--font-mono); font-size: 0.9em; }
.site-main pre {
  background: var(--bg-ink);
  color: var(--fg-on-ink);
  border-radius: 0;
  padding: var(--s-5);
  overflow-x: auto;
  line-height: var(--lh-body);
  font-size: var(--t-sm);
}
.site-main pre .comment { color: var(--fg-on-ink-muted); }
.site-main pre .key { color: #9ab8d4; }
.site-main pre .str { color: #c9a27a; }
.site-main pre .tag { color: #c58a6f; }

.site-main blockquote {
  margin: var(--s-6) 0;
  padding-left: var(--s-5);
  border-left: var(--bw-strong) solid var(--border-strong);
  color: var(--text-muted);
  max-width: var(--measure);
}

.site-main table {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  border-collapse: collapse;
  margin: var(--s-5) 0;
}
.site-main th, .site-main td {
  text-align: left;
  padding: 8px 16px 8px 0;
  border-bottom: var(--bw) solid var(--border);
}
.site-main th {
  font-weight: var(--w-regular);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
}

.site-main img { max-width: 100%; height: auto; border-radius: 0; }

.site-main .page { max-width: var(--measure); margin: 0 auto; }