/* Generated from theme/tokens.yaml — do not edit. */

/* ── Web fonts ──────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap");

:root {
  /* Fonts */
  --font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", "DejaVu Sans", sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", "SF Mono", "DejaVu Sans Mono", monospace;
  --font-serif: "IBM Plex Serif", "Georgia", "DejaVu Serif", serif;

  /* Type scale */
  --size-h1: 20pt;
  --size-h2: 16.5pt;
  --size-h3: 14pt;
  --size-h4: 12pt;
  --size-body: 10pt;
  --size-small: 8.5pt;
  --size-code: 9pt;
  --size-footer: 8pt;

  /* Spacing */
  --space-1: 4pt;
  --space-2: 8pt;
  --space-3: 12pt;
  --space-4: 16pt;
  --space-6: 24pt;
  --space-8: 32pt;

  /* Light theme (default) */
  --ms-bg: #ffffff;
  --ms-text: #1a1a1a;
  --ms-secondary: #6b6b6b;
  --ms-muted: #999999;
  --ms-accent: #0072B2;
  --ms-accent-dark: #005580;
  --ms-bg-code: #f5f5f5;
  --ms-bg-alert: #f0f4f8;
  --ms-border: #d4d4d4;

  /* Entry type colors (Tol vibrant) */
  --ms-entry-req: #0077BB;
  --ms-entry-spec: #009988;
  --ms-entry-test: #EE7733;

  /* Alert colors (Tol vibrant) */
  --ms-alert-note-border: #0077BB;
  --ms-alert-note-bg: #eef5fc;
  --ms-alert-tip-border: #009988;
  --ms-alert-tip-bg: #eef7f5;
  --ms-alert-important-border: #EE3377;
  --ms-alert-important-bg: #fdeef5;
  --ms-alert-warning-border: #EE7733;
  --ms-alert-warning-bg: #fdf4ee;
  --ms-alert-caution-border: #CC3311;
  --ms-alert-caution-bg: #fdeeed;

  /* Diagram palette (Tol vibrant) */
  --ms-diagram-blue: #0077BB;
  --ms-diagram-cyan: #33BBEE;
  --ms-diagram-teal: #009988;
  --ms-diagram-orange: #EE7733;
  --ms-diagram-red: #CC3311;
  --ms-diagram-purple: #EE3377;
  --ms-diagram-grey: #BBBBBB;
}

[data-theme="dark"] {
  --ms-bg: #1a1a1a;
  --ms-text: #e4e4e4;
  --ms-secondary: #999999;
  --ms-muted: #666666;
  --ms-accent: #56b4e9;
  --ms-accent-dark: #3a8fbf;
  --ms-bg-code: #2a2a2a;
  --ms-bg-alert: #242424;
  --ms-border: #404040;
}

/* ── mdBook overrides ───────────────────────────────────── */

:root {
  --mono-font: var(--font-mono);
}

.light, .rust {
  --sidebar-bg: var(--ms-bg-code);
  --sidebar-fg: var(--ms-text);
  --sidebar-active: var(--ms-accent);
  --links: var(--ms-accent);
  --inline-code-color: var(--ms-text);
  --theme-popup-bg: var(--ms-bg);
  --theme-popup-border: var(--ms-border);
  --quote-bg: var(--ms-bg-alert);
  --quote-border: var(--ms-border);
  --table-border-color: var(--ms-border);
  --table-header-bg: var(--ms-bg-code);
}

.navy, .ayu, .coal {
  --links: var(--ms-accent);
  --inline-code-color: #e4e4e4;
}

/* ── Base typography ────────────────────────────────────── */

body { font-family: var(--font-sans); }
code, pre > code { font-family: var(--font-mono); }
h1, h2, h3, h4 { font-weight: 600; }

/* ── Entry blocks ──────────────────────────────────────── */

.req-block {
  border-left: 2px solid var(--ms-entry-req);
  padding: 0 0 0 14px;
  margin: 12pt 0;
}
.req-block[data-entry-type="spec"] { border-left-color: var(--ms-entry-spec); }
.req-block[data-entry-type="test"] { border-left-color: var(--ms-entry-test); }
.req-block .req-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.req-block .req-id { font-size: var(--size-body); font-weight: 500; color: var(--ms-entry-req); }
.req-block[data-entry-type="spec"] .req-id { color: var(--ms-entry-spec); }
.req-block[data-entry-type="test"] .req-id { color: var(--ms-entry-test); }
.req-block .req-name { font-size: var(--size-body); font-weight: 500; }
.req-block .req-body { margin-top: 4px; line-height: 1.65; }
.req-block .req-meta { font-size: var(--size-small); font-style: italic; color: var(--ms-secondary); margin-top: 8px; }
.pill-group { display: inline-flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }
.pill { font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 9px; background: var(--ms-bg-code); color: var(--ms-secondary); white-space: nowrap; }
.cross-ref { text-decoration: underline dashed; text-decoration-color: var(--ms-border); text-underline-offset: 2px; color: inherit; cursor: pointer; }

/* ── Alerts ─────────────────────────────────────────────── */

.alert {
  border: 1px solid var(--ms-border);
  border-radius: 3px;
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}
.alert.note { border-color: var(--ms-alert-note-border); background: var(--ms-alert-note-bg); }
.alert.tip { border-color: var(--ms-alert-tip-border); background: var(--ms-alert-tip-bg); }
.alert.important { border-color: var(--ms-alert-important-border); background: var(--ms-alert-important-bg); }
.alert.warning { border-color: var(--ms-alert-warning-border); background: var(--ms-alert-warning-bg); }
.alert.caution { border-color: var(--ms-alert-caution-border); background: var(--ms-alert-caution-bg); }
.alert-label { display: block; font-weight: 600; margin-bottom: var(--space-1); }

/* ── Captions ───────────────────────────────────────────── */

p.caption {
  font-size: var(--size-small);
  color: var(--ms-secondary);
  font-style: italic;
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}