/* ========================================================================== 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 , 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%; }