/* ================================================================
 * AngaraBase — Brand Book v3 design tokens for mdBook.
 *
 * Source of truth:
 *   business_strategy/brendbook/AngaraBase_BrandBook_v3.md
 *
 * Conventions:
 *   - All tokens live under the `--ab-*` namespace (brand book §06–§09).
 *   - Authored content styles MUST reference tokens, not raw hex values.
 *   - Legacy `--angara-*` names from v2 are kept as aliases so older
 *     pages that still use them keep rendering; new code uses `--ab-*`.
 *   - Each numeric color carries a matching `--ab-*-rgb` triplet so
 *     components can apply alpha without recomputing the hex.
 * ================================================================ */


:root {
  /* --- §06.1 Brand colors (primary palette) --- */
  --ab-rust-500: #e8612a;
  --ab-rust-500-rgb: 232, 97, 42;
  --ab-rust-600: #c04a1a;
  --ab-rust-400: #f08359;
  --ab-cyan-500: #00b4d8;
  --ab-cyan-500-rgb: 0, 180, 216;
  --ab-cyan-300: #90e0ef;
  --ab-cyan-700: #0086a3;
  --ab-gradient-brand: linear-gradient(
    90deg,
    var(--ab-rust-500) 0%,
    var(--ab-cyan-500) 100%
  );

  /* --- §06.2 Surface (dark-mode canonical) --- */
  --ab-night-900: #060c14;
  --ab-night-800: #0d1620;
  --ab-night-700: #16212e;
  --ab-night-600: #1f2d3e;

  /* --- §06.3 Text --- */
  --ab-text-primary: #eef2f7;
  --ab-text-secondary: #9db0c4;
  --ab-text-tertiary: #4e6478;

  /* --- §06.4 Semantic (status) + paired 12% background --- */
  --ab-success: #34d399;
  --ab-success-bg: rgba(52, 211, 153, 0.12);
  --ab-info: #00b4d8;
  --ab-info-bg: rgba(0, 180, 216, 0.12);
  --ab-warning: #f59e0b;
  --ab-warning-bg: rgba(245, 158, 11, 0.12);
  --ab-danger: #ef4444;
  --ab-danger-bg: rgba(239, 68, 68, 0.12);
  --ab-rfc: #a78bfa;
  --ab-rfc-bg: rgba(167, 139, 250, 0.12);

  /* --- §07.1 Font families (each with the canonical fallback chain) --- */
  --ab-font-display: "Literata", Georgia, "Times New Roman", serif;
  --ab-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --ab-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
    Consolas, monospace;
  --ab-font-logo: "Exo 2", "Literata", Georgia, serif;

  /* --- §07.2 Modular type scale (ratio 1.250, base 16px) ---
   *
   * IMPORTANT: all sizes are `em`, not `rem`, on purpose. mdBook ships
   * with `:root { font-size: 62.5% }` (so `1rem == 10px`), which would
   * shrink every value below to ~62 % of intended size. `em` resolves
   * against the parent (`body { font-size: 1.6rem }` ≈ 16 px), giving
   * us the px values from Brand Book §07.2. */
  --ab-fs-base: 16px;
  --ab-fs-display: 3em;         /* 48 px — hero */
  --ab-fs-h1: 2.44em;           /* 39 px */
  --ab-fs-h2: 1.95em;           /* 31 px */
  --ab-fs-h3: 1.56em;           /* 25 px */
  --ab-fs-h4: 1.25em;           /* 20 px */
  --ab-fs-body: 1em;            /* 16 px */
  --ab-fs-small: 0.875em;       /* 14 px */
  --ab-fs-mono: 0.95em;         /* inline code ≈ 15 px */
  --ab-fs-mono-block: 0.875em;  /* fenced block = 14 px */

  /* Override mdBook's own `--code-font-size` so the inherited
   * `code { font-size: var(--code-font-size) }` rule does NOT
   * compound with `pre { font-size: var(--ab-fs-mono-block) }`
   * (compounding shrank the original `0.9375rem × 0.875em` chain to
   * ~9 px — see screenshot from gost-crypto-setup). With 1em the
   * inner <code> inherits its parent <pre>'s size, so a fenced block
   * is exactly `--ab-fs-mono-block` (14 px). */
  --code-font-size: 1em;

  --ab-lh-display: 1.05;
  --ab-lh-h1: 1.1;
  --ab-lh-h2: 1.15;
  --ab-lh-h3: 1.2;
  --ab-lh-h4: 1.3;
  --ab-lh-body: 1.6;
  --ab-lh-small: 1.5;
  --ab-lh-mono: 1.5;
  --ab-lh-mono-block: 1.55;

  /* --- §09.1 Spacing scale (4-point grid) --- */
  --ab-space-1: 4px;
  --ab-space-2: 8px;
  --ab-space-3: 12px;
  --ab-space-4: 16px;
  --ab-space-5: 24px;
  --ab-space-6: 32px;
  --ab-space-8: 48px;
  --ab-space-10: 64px;
  --ab-space-12: 96px;

  /* --- §09.3 Border radius --- */
  --ab-radius-1: 4px;
  --ab-radius-2: 8px;
  --ab-radius-3: 12px;
  --ab-radius-pill: 999px;

  /* --- Legacy aliases (v2). Keep until all call-sites migrate. --- */
  --angara-rust-orange: var(--ab-rust-500);
  --angara-cyan: var(--ab-cyan-500);
  --angara-cyan-soft: var(--ab-cyan-300);
}

/* ----------------------------------------------------------------
 * Typography — §07 of the brand book.
 *
 * Font families rely on the canonical fallback chains declared in
 * `:root` (§07.1) and do NOT load remote webfonts, because the
 * AngaraBase portal has to stay privacy-friendly (§15 Sovereign
 * lens — no Google/CDN beacons on first paint). When the reader
 * has Inter / Literata / JetBrains Mono installed, they
 * render through; otherwise the system fallback kicks in. Self-
 * hosting the four brand faces under `theme/fonts/` is tracked
 * separately (TD item) so it does not block the design-system
 * alignment.
 * ---------------------------------------------------------------- */

a {
  color: var(--ab-cyan-500);
}

a:hover {
  color: var(--ab-cyan-300);
}

.menu-title {
  color: var(--ab-rust-500) !important;
  font-family: var(--ab-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* §07.3 — body and heading hierarchy. Colors are scoped to the
 * *accent* roles (H2 cyan, H3 rust) because those tokens read
 * cleanly on both light and dark mdBook themes. Body / H1 colors
 * are left to the active mdBook theme so Coal / Ayu / Light /
 * Navy / Rust all keep their own base contrast. */

body,
.content,
.chapter {
  font-family: var(--ab-font-body);
}

.content {
  line-height: var(--ab-lh-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ab-font-display);
  letter-spacing: -0.01em;
}

.content h1 {
  font-size: var(--ab-fs-h1);
  line-height: var(--ab-lh-h1);
}

.content h2 {
  font-size: var(--ab-fs-h2);
  line-height: var(--ab-lh-h2);
  color: var(--ab-cyan-500);
  border-bottom: 1px solid
    var(--table-border-color, rgba(var(--ab-cyan-500-rgb), 0.25));
  padding-bottom: var(--ab-space-2);
  margin-top: var(--ab-space-8);
  margin-bottom: var(--ab-space-4);
}

.content h3 {
  font-size: var(--ab-fs-h3);
  line-height: var(--ab-lh-h3);
  color: var(--ab-rust-500);
  margin-top: var(--ab-space-6);
  margin-bottom: var(--ab-space-3);
}

.content h4 {
  font-size: var(--ab-fs-h4);
  line-height: var(--ab-lh-h4);
  margin-top: var(--ab-space-5);
  margin-bottom: var(--ab-space-3);
}

.content strong,
.content b {
  font-weight: 600;
}

/* ----------------------------------------------------------------
 * Code — §13.2.
 *
 * Font family is applied universally; the deep `#030609` surface
 * and `--ab-night-600` border are scoped to dark mdBook themes
 * (:not(.light)) because a near-black block on Light would destroy
 * contrast. Light mode keeps the mdBook default tomorrow-night
 * surface which was designed for it.
 * ---------------------------------------------------------------- */

.content code,
.content pre,
.content kbd,
.content samp {
  font-family: var(--ab-font-mono);
}

.content :not(pre) > code {
  font-size: var(--ab-fs-mono);
  padding: 2px 6px;
  border-radius: var(--ab-radius-1);
  color: var(--ab-cyan-300);
  background: rgba(var(--ab-cyan-500-rgb), 0.08);
}

.content pre {
  font-size: var(--ab-fs-mono-block);
  line-height: var(--ab-lh-mono-block);
  border-radius: var(--ab-radius-2);
  padding: var(--ab-space-5);
}

html:not(.light) .content pre {
  background: #030609;
  border: 1px solid var(--ab-night-600);
}

html:not(.light) .content pre > code {
  background: transparent;
  color: inherit;
}

/* ----------------------------------------------------------------
 * Tables — §13.4.
 *
 * mdBook already renders table headers bold; we tighten the font,
 * lift border color into tokens, and add zebra rows on dark themes
 * only. Light theme keeps its own muted zebra for readability.
 * ---------------------------------------------------------------- */

.content table {
  border-collapse: collapse;
  border: 1px solid var(--table-border-color, var(--ab-night-600));
}

.content table thead th {
  font-family: var(--ab-font-body);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid
    var(--table-border-color, var(--ab-night-600));
  padding: var(--ab-space-2) var(--ab-space-3);
}

.content table td {
  padding: var(--ab-space-2) var(--ab-space-3);
  border-top: 1px solid var(--table-border-color, var(--ab-night-600));
}

html:not(.light) .content table thead th {
  background: var(--ab-night-700);
  color: var(--ab-text-primary);
}

html:not(.light) .content table tbody tr:nth-child(odd) {
  background: rgba(13, 22, 32, 0.6); /* --ab-night-800 at 60 % */
}

/* ----------------------------------------------------------------
 * Page container — §09.2 (docs readability).
 *
 * Brand book targets max-width 760 px / 24 px padding for the
 * "Документация" context. mdBook exposes this through `.page`
 * via theme CSS variables; we raise `--content-max-width` just
 * enough to respect the brand book without overriding mdBook's
 * responsive rules on narrow viewports.
 * ---------------------------------------------------------------- */

:root {
  --content-max-width: 760px;
}

.content main {
  max-width: var(--content-max-width);
  padding-left: var(--ab-space-5);
  padding-right: var(--ab-space-5);
}

/* ----------------------------------------------------------------
 * Top-center brand logo in the mdBook menu bar.
 * (Removed to fix header appearance)
 * ---------------------------------------------------------------- */

#mdbook-menu-bar,
#menu-bar {
  position: relative;
}

@media (max-width: 900px) {
  #mdbook-menu-bar,
  #menu-bar {
  }
}

/* ----------------------------------------------------------------
 * Landing page polish (used by angarabook/src/index.md).
 *
 * Scoped to .angara-* class names so all rules are opt-in and never
 * leak into authored content pages. All colors go through tokens;
 * mdBook theme variables (--quote-border, --fg, --table-border-color)
 * are honoured as fallbacks so the hero respects ayu/light/rust.
 * ---------------------------------------------------------------- */

.angara-hero {
  margin: var(--ab-space-5) 0 var(--ab-space-6);
  padding: var(--ab-space-5) var(--ab-space-5);
  border-radius: var(--ab-radius-3);
  border: 1px solid
    var(--quote-border, rgba(var(--ab-rust-500-rgb), 0.4));
  background: linear-gradient(
    135deg,
    rgba(var(--ab-rust-500-rgb), 0.08) 0%,
    rgba(var(--ab-cyan-500-rgb), 0.06) 100%
  );
}

.angara-hero h1,
.angara-hero h2 {
  margin-top: 0;
}

.angara-hero p:last-child {
  margin-bottom: 0;
}

.angara-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-space-1) var(--ab-space-2);
  margin: var(--ab-space-3) 0 var(--ab-space-4);
}

.angara-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: var(--ab-radius-pill);
  font-size: var(--ab-fs-small);
  line-height: 1.4;
  font-weight: 500;
  border: 1px solid currentColor;
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.angara-badge--rust {
  color: var(--ab-rust-500);
}

.angara-badge--cyan {
  color: var(--ab-cyan-500);
}

.angara-badge--neutral {
  color: var(--fg, var(--ab-text-secondary));
  opacity: 0.8;
}

.angara-badge a,
.angara-badge a:hover {
  color: inherit;
  text-decoration: none;
}

/* Subtle dividers above H2 sections of the landing page so the
 * sections do not blur into one wall of text on wider screens. */
.angara-section-divider {
  border: 0;
  border-top: 1px solid
    var(--table-border-color, rgba(255, 255, 255, 0.08));
  margin: var(--ab-space-8) 0 var(--ab-space-5);
}

/* ----------------------------------------------------------------
 * Admonitions / callouts — §13.3.
 *
 * Rendered by `tools/docs/mdbook_admonitions.py` from a GitHub-style
 * `> [!TYPE]` block. Five brand types share a common chassis; the
 * variant classes only swap the accent color so the entire callout
 * family stays visually consistent across Light / Ayu / Navy.
 * ---------------------------------------------------------------- */

.ab-admonition {
  --_ab-admon-color: var(--ab-cyan-500);
  --_ab-admon-bg: var(--ab-info-bg);
  margin: var(--ab-space-5) 0;
  padding: var(--ab-space-4) var(--ab-space-5);
  border-left: 4px solid var(--_ab-admon-color);
  border-radius: 0 var(--ab-radius-2) var(--ab-radius-2) 0;
  background: var(--_ab-admon-bg);
}

.ab-admonition__title {
  display: flex;
  align-items: center;
  gap: var(--ab-space-2);
  margin: 0 0 var(--ab-space-2);
  font-family: var(--ab-font-body);
  font-weight: 600;
  font-size: var(--ab-fs-body);
  color: var(--_ab-admon-color);
}

.ab-admonition__icon {
  font-size: 1.1em;
  line-height: 1;
}

.ab-admonition__label {
  letter-spacing: 0.01em;
}

.ab-admonition__body > *:first-child {
  margin-top: 0;
}

.ab-admonition__body > *:last-child {
  margin-bottom: 0;
}

.ab-admonition--note {
  --_ab-admon-color: var(--ab-info);
  --_ab-admon-bg: var(--ab-info-bg);
}

.ab-admonition--tip {
  --_ab-admon-color: var(--ab-success);
  --_ab-admon-bg: var(--ab-success-bg);
}

.ab-admonition--warning {
  --_ab-admon-color: var(--ab-warning);
  --_ab-admon-bg: var(--ab-warning-bg);
}

.ab-admonition--danger {
  --_ab-admon-color: var(--ab-danger);
  --_ab-admon-bg: var(--ab-danger-bg);
}

.ab-admonition--rfc {
  --_ab-admon-color: var(--ab-rfc);
  --_ab-admon-bg: var(--ab-rfc-bg);
}

/* ----------------------------------------------------------------
 * Status badges — §13.1.
 *
 * Semantic taxonomy used in body text to tag features by readiness
 * state. Shares the pill chassis with `.angara-badge` but exposes
 * the brand's success / info / warning / danger / rfc / experimental
 * colors by intent rather than by visual tint — authors do not have
 * to remember which colour represents which state.
 *
 * Usage (in markdown):
 *   <span class="ab-status ab-status--success">✓ Stable</span>
 *   <span class="ab-status ab-status--rfc">🔷 RFC Open</span>
 * ---------------------------------------------------------------- */

.ab-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-space-1);
  padding: 0.12rem 0.55rem;
  border-radius: var(--ab-radius-pill);
  font-family: var(--ab-font-body);
  font-size: var(--ab-fs-small);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
  white-space: nowrap;
  text-decoration: none !important;
}

.ab-status--success {
  color: var(--ab-success);
  background: var(--ab-success-bg);
}

.ab-status--info,
.ab-status--experimental {
  color: var(--ab-info);
  background: var(--ab-info-bg);
}

.ab-status--warning {
  color: var(--ab-warning);
  background: var(--ab-warning-bg);
}

.ab-status--danger {
  color: var(--ab-danger);
  background: var(--ab-danger-bg);
}

.ab-status--rfc {
  color: var(--ab-rfc);
  background: var(--ab-rfc-bg);
}

/* ----------------------------------------------------------------
 * 404 page (used by angarabook/src/404.md).
 *
 * Centred layout with mascot illustration placeholder; the actual
 * Nerpa mascot asset is pulled from `business_strategy/brendbook/
 * icons/` once the brand-asset copy script lands. Until then the
 * page still reads cleanly without the image.
 * ---------------------------------------------------------------- */

.ab-404 {
  max-width: 640px;
  margin: var(--ab-space-10) auto;
  padding: 0 var(--ab-space-5);
  text-align: center;
}

.ab-404__code {
  font-family: var(--ab-font-display);
  font-size: var(--ab-fs-display);
  line-height: var(--ab-lh-display);
  color: var(--ab-rust-500);
  margin: 0;
}

.ab-404__mascot {
  display: block;
  width: 128px;
  height: 128px;
  margin: var(--ab-space-5) auto;
  opacity: 0.9;
}

.ab-404__lead {
  font-family: var(--ab-font-display);
  font-size: var(--ab-fs-h3);
  margin: var(--ab-space-4) 0 var(--ab-space-5);
  color: var(--ab-cyan-500);
}