@font-face{font-family:'IBM Plex Sans Variable';font-style:normal;font-weight:100 900;font-display:swap;src:url('./ibm-plex-sans-latin-wght-normal-IvpUvPa2.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('./chakra-petch-latin-600-normal-DVQm9bgb.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono Variable';font-style:normal;font-weight:100 800;font-display:swap;src:url('./jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2') format('woff2')}
/* Shared by the app and generated editorial pages. */
:root {
  /* superfícies */
  --msx-void: #08090b;
  --msx-void-2: #0b0d10;
  --msx-panel: #0f1216;
  --msx-panel-2: #14181d;
  --msx-panel-3: #1a1f25;
  --msx-hair: rgba(255, 255, 255, 0.085);
  --msx-hair-2: rgba(255, 255, 255, 0.16);
  --msx-grid: rgba(255, 255, 255, 0.038);

  /* fósforo (marca) */
  --msx-phos: #ffb020;
  --msx-phos-2: #ffd479;
  --msx-phos-ink: #1a1200;
  --msx-phos-soft: rgba(255, 176, 32, 0.12);
  --msx-phos-line: rgba(255, 176, 32, 0.32);

  /* sinal / alerta */
  --msx-signal: #4fe0a5;
  --msx-alert: #ff5470;
  --msx-cool: #6fc3ff;

  /* tinta */
  --msx-ink: #e9e7e2;
  --msx-ink-2: #a8aeb6;
  --msx-ink-3: #929ba5;

  --msx-radius: 14px;
  --msx-radius-lg: 20px;
  --msx-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.9);

  --msx-font-display: 'Chakra Petch', 'IBM Plex Sans', ui-sans-serif, sans-serif;
  --msx-font-body: 'IBM Plex Sans Variable', 'IBM Plex Sans', ui-sans-serif, sans-serif;
  --msx-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
}

html.ms-studio-light {
  --msx-void: #eceef1;
  --msx-void-2: #f3f4f6;
  --msx-panel: #ffffff;
  --msx-panel-2: #f7f8fa;
  --msx-panel-3: #e8ebef;
  --msx-hair: rgba(22, 28, 38, 0.12);
  --msx-hair-2: rgba(22, 28, 38, 0.24);
  --msx-grid: rgba(22, 28, 38, 0.065);
  --msx-phos: #a84907;
  --msx-phos-2: #8b3b05;
  --msx-phos-ink: #fff7f0;
  --msx-phos-soft: rgba(168, 73, 7, 0.09);
  --msx-phos-line: rgba(168, 73, 7, 0.32);
  --msx-signal: #0f7a55;
  --msx-alert: #b4213c;
  --msx-cool: #1f5f8f;
  --msx-ink: #12161c;
  --msx-ink-2: #454d59;
  --msx-ink-3: #5b6470;
  --msx-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 30px -22px rgba(22, 28, 38, 0.35);
}

/* Layout stays in the page templates; identity comes from brand-tokens.css. */
:root {
  --bg: var(--msx-void);
  --surface: var(--msx-panel);
  --text: var(--msx-ink);
  --muted: var(--msx-ink-2);
  --line: var(--msx-hair);
  --accent: var(--msx-phos);
}

body {
  font-family: var(--msx-font-body);
  background: var(--msx-void);
  color: var(--msx-ink);
}

h1, h2, h3, header a:first-child {
  font-family: var(--msx-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

header a:first-child {
  color: var(--msx-ink);
  font-size: 1.05rem;
}

a { color: var(--msx-phos); }
header a, .article-toc a { color: var(--msx-ink); }
a:hover { color: var(--msx-phos-2); }
.standfirst { color: var(--msx-ink-2); }
.card-meta { color: var(--msx-ink-3); }

.article-kicker, .eyebrow, .tool-id, .card-meta, .cta, .trail-nav {
  font-family: var(--msx-font-mono);
}

section, .card, .tool-card, .how, .notice, .editorial-intro, .article-toc,
.related-grid a, .trail-nav a, .tool-links a, .cta, header a, footer a,
.blog-body .table-scroll {
  border-radius: var(--msx-radius);
}

.card, .tool-card {
  background: var(--msx-panel);
  border-color: var(--msx-hair);
  transition: border-color 150ms ease;
}

.card:hover, .tool-card:hover, .cta:hover, .cta.secondary:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--msx-phos-line);
}

.article-toc, .editorial-intro, .how {
  background: var(--msx-panel);
  border: 1px solid var(--msx-hair);
  border-left: 3px solid var(--msx-phos);
}

.cta {
  background: var(--msx-phos);
  color: var(--msx-phos-ink);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.cta:hover { background: var(--msx-phos-2); color: var(--msx-phos-ink); }
.cta.secondary, .cta.secondary:hover { background: var(--msx-panel); color: var(--msx-ink); }
footer a { background: transparent; }
footer a:hover { background: var(--msx-phos-soft); color: var(--msx-phos); }
footer button { font-family: var(--msx-font-body); border-radius: var(--msx-radius) !important; }

.blog-body { font-size: 1.0625rem; line-height: 1.8; }
.blog-body h2 { margin-top: 2.5rem; font-size: 1.5rem; line-height: 1.25; }
.blog-body h3 { font-size: 1.18rem; line-height: 1.35; }
.blog-body strong { color: var(--msx-ink); }
.blog-figure { margin: 2rem 0; }
.blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--msx-hair-2);
  border-radius: var(--msx-radius);
  background: var(--msx-panel);
}
.blog-figure figcaption {
  max-width: 72ch;
  margin-top: 0.7rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--msx-phos);
  color: var(--msx-ink-2);
  font-size: 0.875rem;
  line-height: 1.6;
}
.blog-figure figcaption span { color: var(--msx-ink); font-weight: 600; }
@media (max-width: 480px) {
  .blog-body { font-size: 1rem; }
  .blog-body h2 { font-size: 1.35rem; }
}