/* Typhon brand theme for the DocFX "modern" template (Bootstrap 5.3).
 *
 * Brand tokens mirror the typhondb.io apex (src/styles/global.css): orange #ff8c00
 * accent, Inter body + JetBrains Mono code, loaded from the same Google Fonts CDN the
 * apex uses (kept identical so the two properties read as one brand). The apex is
 * dark-only; this docs site KEEPS DocFX's light/dark switcher but carries the orange
 * accent into both themes — docs get read in bright rooms, so forcing dark is hostile.
 *
 * Theming hook: the DocFX modern template documents overriding Bootstrap's
 * `--bs-link-color-rgb` / `--bs-link-hover-color-rgb` (RGB triplets) as THE supported
 * way to recolor. We also set `--bs-primary-rgb` (buttons / active states) and the
 * font-family variables. `@import` must stay first in the file (CSS rule ordering). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Fonts — the apex stacks verbatim; the system fallbacks render cleanly if the
     webfont is blocked (offline / privacy extensions) without a layout shift. */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Accent — LIGHT mode. Link TEXT uses a darker orange (#c26900) so it clears
     WCAG-AA contrast on white (the pure brand #ff8c00 is ~2.9:1 on white — fails).
     The pure brand orange is reserved for non-text accents via --bs-primary. */
  --bs-link-color-rgb: 194, 105, 0;          /* #c26900 */
  --bs-link-hover-color-rgb: 143, 77, 0;     /* #8f4d00 */
  --bs-primary-rgb: 255, 140, 0;             /* #ff8c00 — brand orange */
}

/* Accent — DARK mode: the apex aesthetic. Brand orange has ample contrast on the
   dark surface, and the -bright variant (#ffa033) is the hover, exactly as the apex. */
[data-bs-theme="dark"] {
  --bs-link-color-rgb: 255, 140, 0;          /* #ff8c00 */
  --bs-link-hover-color-rgb: 255, 160, 51;   /* #ffa033 — --color-typhon-bright */
  --bs-primary-rgb: 255, 140, 0;
}

/* Text selection — brand orange on the deep background, matching the apex ::selection. */
::selection {
  background-color: #ff8c00;
  color: #0c0c12;
}

/* ---- Diagram / image lightbox (see public/main.js) ---------------------------
   Full-screen overlay for zooming large SVG diagrams (vector-crisp via svg-pan-zoom)
   and raster screenshots. Dark backdrop regardless of the page theme — you're
   inspecting a figure, and the apex's dark surface is the right canvas for it. */
body.tphn-lb-lock { overflow: hidden; }

.tphn-lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  flex-direction: column;
  background: rgba(12, 12, 18, 0.95);      /* --color-deep, translucent */
}
.tphn-lb.is-open { display: flex; }

.tphn-lb-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  color: #f0f0f5;
  font-size: 0.85rem;
  border-bottom: 1px solid #ffffff1a;
}
.tphn-lb-hint { color: #9595a8; }
.tphn-lb-orig { margin-left: auto; color: #ffa033; text-decoration: none; }
.tphn-lb-orig:hover { text-decoration: underline; }
.tphn-lb-x {
  background: none;
  border: none;
  color: #f0f0f5;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0.35rem;
  cursor: pointer;
}
.tphn-lb-x:hover { color: #ff8c00; }

.tphn-lb-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}
.tphn-lb-stage:active { cursor: grabbing; }
.tphn-lb-stage > svg { width: 100%; height: 100%; display: block; }
.tphn-lb-img { max-width: 100%; max-height: 100%; will-change: transform; user-select: none; }
.tphn-lb-msg { color: #9595a8; margin-top: 20vh; }

/* svg-pan-zoom's built-in zoom controls — tint to the brand palette. */
.tphn-lb .svg-pan-zoom-control-background { fill: #14141e; stroke: #ffffff1a; opacity: 0.9; }
.tphn-lb .svg-pan-zoom-control:hover .svg-pan-zoom-control-background { fill: #1a1a28; }

/* Signal that diagrams/images are interactive. */
article a[href$=".svg"] { cursor: zoom-in; display: inline-block; }
article img { cursor: zoom-in; }