/* OnlyUtils brand overrides for the Scalar API Reference renderer. Only CSS custom properties are touched — Scalar's own layout/components are left alone (per Scalar's documented theming API: `theme: 'none'` in index.html disables the built-in presets so these variables apply cleanly). Palette source: apps/web/src/theme.css. Fonts vendored locally (./fonts) — General Sans (apps/web) and JetBrains Mono (apps/admin); licenses alongside each family's files. */ @font-face { font-family: "General Sans"; src: url("./fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("./fonts/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("./fonts/GeneralSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("./fonts/GeneralSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("./fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("./fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("./fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("./fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* The mode class lives on — Scalar toggles `light-mode`/`dark-mode` there, following the system preference until the reader flips the sidebar switch (persisted in localStorage). Both modes are themed below. Selectors carry an extra qualifier (`html:root`, `body.light-mode`) on purpose: Scalar's standalone bundle injects its own stylesheet at runtime, and its `:root` / `.light-mode` blocks would otherwise be a source-order coin flip against ours at equal specificity. */ html:root { --scalar-font: "General Sans", ui-sans-serif, system-ui, sans-serif; --scalar-font-code: "JetBrains Mono", ui-monospace, monospace; color-scheme: light dark; } body.light-mode { --scalar-color-accent: #c97f05; /* ou-amber-deep — amber on paper needs the deeper shade for AA contrast */ --scalar-background-1: #fafaf8; /* ou-paper */ --scalar-background-2: #f1f0ea; /* ou-paper-dim */ --scalar-background-3: #e4e2da; --scalar-background-accent: #fce6b4; /* ou-amber-30 */ --scalar-color-1: #14161b; /* ou-ink */ --scalar-color-2: #5b5d66; /* ou-steel-ink */ --scalar-color-3: #8e8e8e; --scalar-border-color: #e4e2da; --scalar-background-card: #ffffff; --scalar-background-4: #e4e2da; /* Semantic set — Scalar paints method badges, `required` flags and status tabs from these. Kept distinguishable (GET ≠ POST at a glance) but pulled into the brand's navy/amber family instead of stock blue and orange. */ --scalar-color-blue: #3b6ea5; --scalar-color-green: #2f7d5c; --scalar-color-orange: #c97f05; /* ou-amber-deep */ --scalar-color-yellow: #c97f05; --scalar-color-red: #b04437; --scalar-color-purple: #6a5aa8; /* Links echo the landing page: ink text, amber underline. */ --scalar-link-color: #1e212f; /* ou-navy */ --scalar-link-color-hover: #c97f05; --scalar-link-color-visited: #1e212f; --scalar-text-decoration: underline; --scalar-text-decoration-color: #f6ab05; /* ou-amber */ --scalar-text-decoration-hover: underline; --scalar-text-decoration-color-hover: #c97f05; --scalar-button-1: #1e212f; /* navy button, paper label — same as the landing CTA */ --scalar-button-1-color: #fafaf8; --scalar-button-1-hover: #2a2e40; --scalar-sidebar-background-1: #fafaf8; --scalar-sidebar-color-active: #1e212f; /* ou-navy */ --scalar-sidebar-item-active-background: #fce6b4; --scalar-sidebar-item-hover-background: #f1f0ea; --scalar-sidebar-indent-border-active: #f6ab05; --scalar-sidebar-indent-border-hover: #c6c8cd; --scalar-sidebar-search-background: #ffffff; --scalar-sidebar-search-border-color: #e4e2da; --scalar-sidebar-border-color: #e4e2da; --scalar-scrollbar-color-active: #c97f05; } body.dark-mode { --scalar-color-accent: #f6ab05; /* ou-amber — pops on navy */ --scalar-background-1: #1e212f; /* ou-navy */ --scalar-background-2: #2a2e40; /* ou-navy-dim */ --scalar-background-3: #363b52; --scalar-background-accent: #f6ab051f; --scalar-color-1: #fafaf8; /* ou-paper */ --scalar-color-2: #c6c8cd; /* ou-steel */ --scalar-color-3: #8e929e; --scalar-border-color: #363b52; --scalar-background-card: #2a2e40; --scalar-background-4: #363b52; /* Same semantic set, lifted for contrast against navy. */ --scalar-color-blue: #7aa9dc; --scalar-color-green: #5fbf93; --scalar-color-orange: #f6ab05; /* ou-amber */ --scalar-color-yellow: #f6ab05; --scalar-color-red: #e4796c; --scalar-color-purple: #a294e0; /* On navy, amber carries the link itself rather than just the underline. */ --scalar-link-color: #f6ab05; --scalar-link-color-hover: #fce6b4; --scalar-link-color-visited: #f6ab05; --scalar-text-decoration: underline; --scalar-text-decoration-color: #c97f05; --scalar-text-decoration-hover: underline; --scalar-text-decoration-color-hover: #f6ab05; --scalar-button-1: #f6ab05; --scalar-button-1-color: #14161b; /* ou-ink on amber */ --scalar-button-1-hover: #ffc23d; --scalar-sidebar-background-1: #1e212f; --scalar-sidebar-color-active: #f6ab05; --scalar-sidebar-item-active-background: #2a2e40; --scalar-sidebar-item-hover-background: #2a2e40; --scalar-sidebar-indent-border-active: #f6ab05; --scalar-sidebar-indent-border-hover: #8e929e; --scalar-sidebar-search-background: #2a2e40; --scalar-sidebar-search-border-color: #363b52; --scalar-sidebar-border-color: #363b52; --scalar-scrollbar-color-active: #f6ab05; }