/* Bytes & Miles — brand layer (rebrand).
   ONE file that (1) defines brand tokens (light :root + forest html.dark) and
   (2) recolors/refonts the shared chrome to those tokens. Linked LAST in <head>
   (after the page's inline <style> and theme.css) so it wins at equal specificity.
   It only touches COLOR + FONT (never layout), so it reskins without reflowing.
   System fonts only. Token names are a superset of theme.css's so its html.dark
   class overrides keep working against the new forest values.
   Linked on every page including posts (tech/ , posts/) — use ../assets/brand.css there. */

:root {
  /* type */
  --font-head: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Courier New", ui-monospace, Menlo, Monaco, monospace;
  /* light surfaces */
  --bg:#f4f6f3; --surface:#ffffff; --surface-2:#eef2ee; --ink-deep:#0b1f17;
  /* ink */
  --text:#13241c; --head:#0b1f17; --p:#2d3b34; --muted:#6b766f; --border:#dde3df;
  /* brand green (two-green model) */
  --accent:#1f7a45; --accent-strong:#176a3a; --accent-neon:#36e27a; --accent-dim:#36e27a;
  /* pills / tags */
  --pill-bg:#e8f3ec; --pill-bd:#cfe6d8; --pill-tx:#1f7a45;
  color-scheme:light;
}

html.dark {
  --bg:#06140f; --surface:#0d2a1e; --surface-2:#102f22; --ink-deep:#06140f;
  --text:#e9f1ec; --head:#f3f8f4; --p:#c4d3c9; --muted:#8ba093; --border:#1f3a2c;
  --accent:#36e27a; --accent-strong:#5ceb93; --accent-neon:#36e27a; --accent-dim:#7ee0a0;
  --pill-bg:#102f22; --pill-bd:#2a4a37; --pill-tx:#7ee0a0;
  color-scheme:dark;
}

/* ===== global skin: COLOR + FONT only (no layout), token-driven so dark mode follows ===== */
body { background: var(--bg) !important; color: var(--text); font-family: var(--font-body); }

/* header / nav / logo */
header { border-bottom-color: var(--border) !important; }
.logo { color: var(--head) !important; font-family: var(--font-head); }
.logo span { color: var(--accent) !important; }
nav a { color: var(--text) !important; font-family: var(--font-mono); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
nav a:hover { color: var(--accent) !important; background: var(--surface-2) !important; }
nav a.active { color: var(--accent) !important; }

/* headlines → serif */
h1, .hero h1, .page h1, .page-head h1 { font-family: var(--font-head); color: var(--head); }

/* eyebrows / labels / metas → mono */
.hero-eyebrow, .page-eyebrow, .section-title, .post-meta, .post-card-meta,
.card-cat, .card-meta, .post-card .date { font-family: var(--font-mono); }
.hero-eyebrow, .page-eyebrow { color: var(--accent) !important; }

/* prose */
p { color: var(--p); }
.subtitle, .page-desc, .post-card-excerpt, .card-excerpt { color: var(--p); }
a { color: var(--accent); }

/* cards */
.card { background: var(--surface) !important; border-color: var(--border) !important; }
.post-card { border-bottom-color: var(--border) !important; }
.card-title, .post-card-title { font-family: var(--font-head); color: var(--head) !important; }
.card:hover .card-title, .post-card:hover .post-card-title { color: var(--accent) !important; }
.card:hover { border-color: var(--pill-bd) !important; }
.post-card:hover { background: var(--surface-2) !important; }

/* tags / pills → mono */
.tag, .skill-pill { background: var(--pill-bg) !important; border-color: var(--pill-bd) !important; color: var(--pill-tx) !important; font-family: var(--font-mono); letter-spacing: .03em; }

/* buttons */
.btn-primary { background: var(--accent) !important; color: #fff !important; }
.btn-primary:hover { background: var(--accent-strong) !important; }
.btn-secondary { color: var(--text) !important; border-color: var(--border) !important; }
.btn-secondary:hover { color: var(--accent) !important; border-color: var(--accent) !important; }

/* footer */
footer { color: var(--muted); border-top-color: var(--border) !important; }

/* ===== posts (tech/ , posts/): post-only chrome the global skin above doesn't cover ===== */
/* section titles → mono "code" voice, brand green; bespoke diagram boxes are tokenized inline per post */
.post h2 { font-family: var(--font-mono); color: var(--accent) !important; }
.post .post-meta, .post .img-caption { color: var(--muted) !important; }
.post a { color: var(--accent); }
