/* ==========================================================================
   Vantage documentation design tokens

   The token block below is COPIED VERBATIM from site/app/globals.css — same
   names, same values. adminsite/ holds a copy too, web/ holds the dark half,
   and shared/mail/templates/layout.html.tmpl holds it a fifth time as literal
   hex because email clients support neither var() nor prefers-color-scheme.
   Nothing enforces the match automatically: change a token in one file and you
   change it in all of them, in the same commit.

   Everything below the token block maps Docusaurus's --ifm-* variables onto
   these. No rule in this file, and no component in this app, may carry a hex
   value outside the two token blocks.

   Docusaurus always stamps data-theme on <html>, so unlike site/ there is no
   prefers-color-scheme branch to keep in step — the theme toggle is the only
   writer.
   ========================================================================== */

:root,
:root[data-theme="light"] {
    --ground: #eaedf3;
    --panel: #ffffff;
    --panel-2: #f4f6fa;
    --ink: #0a1b33;
    --ink-2: #41556f;
    --ink-3: #6c7f96;
    --rule: #cdd6e2;
    --rule-soft: #e0e6ef;
    --accent: #0b2a58;
    --accent-ink: #ffffff;
    --up: #2f8a60;
    --down: #c6462f;
    --pend: #b0801f;
    --shadow: 0 1px 0 rgba(10, 27, 51, 0.05), 0 18px 40px -26px rgba(10, 27, 51, 0.45);
    --logo: #0b2a58;

    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --s--1: clamp(0.76rem, 0.74rem + 0.1vw, 0.81rem);
    --s-0: clamp(1rem, 0.97rem + 0.14vw, 1.05rem);
    --s-1: clamp(1.16rem, 1.09rem + 0.32vw, 1.36rem);
    --s-2: clamp(1.5rem, 1.34rem + 0.74vw, 2rem);
    --s-3: clamp(2rem, 1.66rem + 1.6vw, 3.1rem);
    --s-4: clamp(2.6rem, 1.9rem + 3.3vw, 4.9rem);

    --rail: 1200px;
}

:root[data-theme="dark"] {
    --ground: #071628;
    --panel: #0d2138;
    --panel-2: #102842;
    --ink: #e4ecf6;
    --ink-2: #9fb3ca;
    --ink-3: #71879f;
    --rule: #1e3855;
    --rule-soft: #172c44;
    --accent: #5b9be8;
    --accent-ink: #04101f;
    --up: #4fb484;
    --down: #e2705a;
    --pend: #d6a63f;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 20px 44px -26px rgba(0, 0, 0, 0.85);
    --logo: #7fb2f0;
}

/* ---------- Docusaurus mapping ---------- */

:root {
    --ifm-color-primary: var(--accent);
    --ifm-color-primary-dark: var(--accent);
    --ifm-color-primary-darker: var(--accent);
    --ifm-color-primary-darkest: var(--accent);
    --ifm-color-primary-light: var(--accent);
    --ifm-color-primary-lighter: var(--accent);
    --ifm-color-primary-lightest: var(--accent);

    --ifm-background-color: var(--ground);
    --ifm-background-surface-color: var(--panel);

    --ifm-font-family-base: var(--sans);
    --ifm-font-family-monospace: var(--mono);
    --ifm-font-size-base: var(--s-0);
    --ifm-line-height-base: 1.65;

    --ifm-heading-font-weight: 800;
    --ifm-heading-line-height: 1.15;
    --ifm-h1-font-size: var(--s-3);
    --ifm-h2-font-size: var(--s-2);
    --ifm-h3-font-size: var(--s-1);

    --ifm-font-color-base: var(--ink);
    --ifm-heading-color: var(--ink);
    --ifm-link-color: var(--accent);
    --ifm-link-hover-color: var(--accent);
    --ifm-toc-link-color: var(--ink-2);

    --ifm-navbar-background-color: var(--panel);
    --ifm-navbar-shadow: none;
    --ifm-navbar-link-color: var(--ink-2);
    --ifm-navbar-link-hover-color: var(--ink);

    --ifm-footer-background-color: var(--panel-2);
    --ifm-footer-color: var(--ink-2);
    --ifm-footer-link-color: var(--ink-2);
    --ifm-footer-title-color: var(--ink);

    --ifm-menu-color: var(--ink-2);
    --ifm-menu-color-active: var(--accent);
    --ifm-menu-color-background-active: var(--panel-2);
    --ifm-menu-color-background-hover: var(--panel-2);

    --ifm-toc-border-color: var(--rule-soft);
    --ifm-hr-border-color: var(--rule-soft);
    --ifm-table-border-color: var(--rule-soft);
    --ifm-table-stripe-background: var(--panel-2);
    --ifm-table-head-background: var(--panel-2);

    --ifm-code-background: var(--panel-2);
    --ifm-code-font-size: 0.88em;
    --ifm-pre-background: var(--panel-2);
    --ifm-blockquote-color: var(--ink-2);
    --ifm-blockquote-border-color: var(--rule);

    --ifm-global-radius: 4px;
    --ifm-alert-border-radius: 4px;
    --ifm-button-border-radius: 4px;
    --ifm-global-shadow-lw: var(--shadow);
    --ifm-global-shadow-md: var(--shadow);

    --ifm-breadcrumb-color-active: var(--accent);
    --ifm-breadcrumb-item-background-active: var(--panel-2);

    --docusaurus-highlighted-code-line-bg: var(--rule-soft);
}

/* Admonitions carry the semantic three. They read by shape and label as well
   as colour, which is the rule everywhere else in the product too. */
.theme-admonition-note,
.theme-admonition-info {
    --ifm-alert-background-color: var(--panel-2);
    --ifm-alert-border-color: var(--rule);
    --ifm-alert-foreground-color: var(--ink);
}

.theme-admonition-tip {
    --ifm-alert-background-color: var(--panel-2);
    --ifm-alert-border-color: var(--up);
    --ifm-alert-foreground-color: var(--ink);
}

.theme-admonition-warning {
    --ifm-alert-background-color: var(--panel-2);
    --ifm-alert-border-color: var(--pend);
    --ifm-alert-foreground-color: var(--ink);
}

.theme-admonition-danger {
    --ifm-alert-background-color: var(--panel-2);
    --ifm-alert-border-color: var(--down);
    --ifm-alert-foreground-color: var(--ink);
}

/* ---------- small corrections ---------- */

.navbar {
    border-bottom: 1px solid var(--rule-soft);
}

.navbar__title {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.footer {
    border-top: 1px solid var(--rule-soft);
}

.markdown h1,
.markdown h2,
.markdown h3 {
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.markdown h2 {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule-soft);
}

.markdown > p,
.markdown li {
    color: var(--ink-2);
}

.markdown strong {
    color: var(--ink);
}

/* Machine output — install one-liners, key blobs, run logs — sits on a floor
   beneath the panel, the same distinction web/ draws with --well. */
.theme-code-block {
    border: 1px solid var(--rule-soft);
    box-shadow: none !important;
}

table {
    display: table;
    width: 100%;
}

.menu {
    font-size: var(--s--1);
    padding: 1rem;
}

.menu__list-item-collapsible .menu__link--sane,
.menu__link {
    border-radius: 4px;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* The reference tables in Reference/ are wide by nature; they scroll inside
   their own container rather than pushing the page sideways. */
.markdown table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
