/* ─── Scalo design system override — injected into all /docs HTML files ─────
   Overrides fonts and cover typography to match getscalo.com design system.
──────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --serif: 'DM Sans', system-ui, sans-serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --color-text-primary: #ffffff;
  --fg-1: var(--color-text-primary);
  --fg-2: var(--color-text-primary);
  --fg-3: var(--color-text-primary);
  --fg-4: rgba(255,255,255,0.5);
  /* remap ember (was near-black) to gold so labels/accents are visible on dark */
  --ember:          #FFD608;
  --ember-dim:      #C4A830;
  --cream:          #ffffff;
  /* lift card borders so they're visible on dark background */
  --border-strong:  rgba(255,255,255,0.18);
  --border-mid:     rgba(255,255,255,0.12);
  --border-ghost:   rgba(255,255,255,0.08);
  /* card backgrounds: slightly lighter than page bg */
  --bg-1: #0D0A08;
  --bg-2: #161210;
  --bg-3: #1E1A17;
  --bg-4: #252017;
  --black: #0D0A08;
}

html, body {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  color: var(--color-text-primary) !important;
}

/* Cover title — was italic serif, now bold DM Sans */
.cover-title,
.cover-title * {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Cover subtitle */
.cover-subtitle,
.cover-subtitle * {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

/* Eyebrow */
.cover-eyebrow,
.cover-eyebrow * {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-style: normal !important;
}

/* Section headings and display text */
h1, h2, h3, h4 {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-style: normal !important;
}

/* Any italic-editorial / display editorial classes */
.italic-editorial,
[class*="display"],
[class*="heading"],
[class*="title"] {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-style: normal !important;
}

/* ─── Contrast fixes for callouts/pills/badges/layer numbers ───
   These were authored for a light card background (near-black text
   on a near-white card). On the dark doc background that text is
   near-invisible. Remap to the dark palette.
──────────────────────────────────────────────────────────────── */
.callout-ember,
.callout-ok {
  background: rgba(255,255,255,0.04) !important;
}
.callout-ok {
  border-left-color: var(--fg-2) !important;
}
.callout-ember .callout-text,
.callout-ok .callout-title,
.callout-ok .callout-text {
  color: var(--fg-2) !important;
}

.pill-ember,
.pill-ok,
.badge-ember,
.badge-ok,
.badge-warn {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--border-ghost) !important;
  color: var(--fg-3) !important;
}

.l2 .layer-num,
.l3 .layer-num,
.l4 .layer-num {
  background: rgba(255,255,255,0.1) !important;
  color: var(--fg-1) !important;
}