/* Odyssey FastAPI — design system. Aims for the polished, layered look of the
Next app: ambient gradients, glass surfaces, depth, Sixense accent. */
:root {
--bg: #070b12;
--surface: rgba(255, 255, 255, 0.035);
--surface-2: rgba(255, 255, 255, 0.06);
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
/* interaction washes: a white wash reads on dark but VANISHES on a light background,
so hover/zebra effects must come from these theme-flipped tokens, never a literal */
--hover: rgba(255, 255, 255, 0.09);
--hover-soft: rgba(255, 255, 255, 0.05);
--tint: rgba(255, 255, 255, 0.025);
/* OPAQUE surfaces for position:sticky cells — the translucent --surface/--surface-2 let
scrolled content show straight through a frozen row/column ("phasing"). These are the
same washes pre-flattened over --bg. */
--surface-opaque: #10141a;
--surface-2-opaque: #161a20;
--text: #e8edf4;
--muted: #93a1b5;
--sixblue: #2b86d6;
--sixblue-deep: #00539b;
--sixred: #e1251b;
--radius: 16px;
--shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
/* Semantic status tokens — theme-aware. Dark defaults are bright-on-dark (the values
already used across the app); html.light (below) swaps in strong ink for white surfaces.
Use `--x` for foreground text/icon/border, `--x-tint` for chip/row backgrounds, and
`--x-solid` for saturated pills that carry white text (stay vivid in both modes). */
--pos: #46c585; --neg: #ff6a60; --warn: #f0b54e; --info: #62b0f5; --scenario: #b07cf5;
--pos-tint: rgba(34,160,90,.14); --neg-tint: rgba(224,83,61,.14); --warn-tint: rgba(224,160,46,.16);
--info-tint: rgba(43,134,214,.14); --scenario-tint: rgba(139,92,246,.14);
--pos-solid: #22a05a; --neg-solid: #e0533d; --warn-solid: #e0a02e; --info-solid: #2b86d6; --scenario-solid: #8b5cf6;
/* opaque surface for floating menus/tooltips/popovers (must not show content through it) */
--menu-bg: #141b28;
--menu-shadow: 0 12px 30px rgba(0,0,0,.55);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
/* native controls (select popups, date pickers) render dark + readable */
select, option, optgroup, input, textarea { color-scheme: dark; }
/* Native / popups do NOT resolve CSS custom properties in Chromium — the text
renders invisible if you use var(). Use CONCRETE hex here. Painting the optgroup (not just the
option) also stops Chromium rendering optgroup-child options on a white canvas in dark mode. */
option, optgroup { background-color: #0f1623; color: #e8edf4; }
optgroup { font-weight: 700; }
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--text);
background: var(--bg);
position: relative;
min-height: 100vh;
}
/* ambient backdrop */
body::before {
content: "";
position: fixed; inset: 0; z-index: -2; pointer-events: none;
background:
radial-gradient(60% 55% at 12% 8%, rgba(0, 83, 155, 0.30), transparent 60%),
radial-gradient(55% 50% at 90% 92%, rgba(225, 37, 27, 0.16), transparent 60%),
radial-gradient(40% 40% at 80% 0%, rgba(43, 134, 214, 0.16), transparent 60%);
}
body::after {
content: "";
position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
background-image:
linear-gradient(to right, #fff 1px, transparent 1px),
linear-gradient(to bottom, #fff 1px, transparent 1px);
background-size: 44px 44px;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -0.02em; }
/* surfaces */
.card, .glass {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
box-shadow: var(--shadow);
}
.tile {
display: block; position: relative; overflow: hidden;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tile::after {
content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
background: radial-gradient(120% 120% at 0% 0%, rgba(43, 134, 214, 0.18), transparent 55%);
transition: opacity .18s ease;
}
.tile:hover { transform: translateY(-3px); border-color: rgba(43, 134, 214, 0.55); box-shadow: 0 18px 40px -16px rgba(0, 83, 155, 0.55); }
.tile:hover::after { opacity: 1; }
/* icon chip */
.chip {
display: inline-flex; align-items: center; justify-content: center;
height: 38px; width: 38px; border-radius: 11px;
background: linear-gradient(135deg, rgba(43,134,214,.22), rgba(0,83,155,.12));
border: 1px solid rgba(43,134,214,.35); color: #cfe3fb;
}
.chip svg { height: 18px; width: 18px; }
/* Per-module accents on the home tiles — distinct hues, same glass theme.
site = Sixense blue, office = teal, admin = Sixense red. */
.tile--site { --tile-accent: 43, 134, 214; }
.tile--office { --tile-accent: 20, 166, 145; }
.tile--admin { --tile-accent: 225, 37, 27; }
.tile--data { --tile-accent: 139, 92, 246; }
.tile--storage { --tile-accent: 6, 162, 200; }
/* MJ delivery modules (promoted to the portal) */
.tile--estimating { --tile-accent: 34, 160, 90; }
.tile--projects { --tile-accent: 43, 134, 214; }
.tile--operations { --tile-accent: 224, 160, 46; }
.tile--finance { --tile-accent: 20, 166, 145; }
.tile--hsqe { --tile-accent: 6, 162, 200; }
.tile--workspace { --tile-accent: 139, 92, 246; }
.tile--mj { --tile-accent: 219, 72, 140; }
/* reusable accent palette for tiles inside a module */
.tile--blue { --tile-accent: 43, 134, 214; }
.tile--teal { --tile-accent: 20, 166, 145; }
.tile--violet { --tile-accent: 139, 92, 246; }
.tile--amber { --tile-accent: 224, 160, 46; }
.tile--green { --tile-accent: 34, 160, 90; }
.tile--red { --tile-accent: 225, 37, 27; }
.tile--cyan { --tile-accent: 6, 162, 200; }
.tile--pink { --tile-accent: 219, 72, 140; }
.tile[class*="tile--"] .chip {
background: linear-gradient(135deg, rgba(var(--tile-accent), .22), rgba(var(--tile-accent), .10));
border-color: rgba(var(--tile-accent), .42);
color: rgb(var(--tile-accent));
}
.tile[class*="tile--"]::after {
background: radial-gradient(120% 120% at 0% 0%, rgba(var(--tile-accent), .20), transparent 55%);
}
.tile[class*="tile--"]:hover {
border-color: rgba(var(--tile-accent), .55);
box-shadow: 0 18px 40px -16px rgba(var(--tile-accent), .50);
}
/* ── Rendered markdown (manuals) — docs-grade typography ────────────────── */
.prose {
max-width: 44rem;
font-size: 0.95rem;
line-height: 1.75;
color: var(--text);
-webkit-font-smoothing: antialiased;
}
.prose > *:first-child { margin-top: 0; }
/* lead paragraph (the italic intro) */
.prose > p:first-of-type { font-size: 1.08rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.6rem; }
/* Headings — H1 down to H4. Only opt-in pages (Site's static manual.html)
hide their leading H1 via .prose.hide-first-h1; DB-backed manuals (Data)
render their H1 normally because the page header has the manual title but
the user may still want a big section title in the body. */
.prose.hide-first-h1 > h1:first-child { display: none; }
.prose h1 {
font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em;
margin: 2rem 0 1rem; padding-bottom: .55rem;
border-bottom: 2px solid var(--sixblue);
}
.prose h1:first-child { margin-top: 0; }
.prose h2 {
font-size: 1.3rem; font-weight: 650; letter-spacing: -.015em;
margin: 2.4rem 0 .9rem; padding-bottom: .45rem;
border-bottom: 1px solid var(--border);
}
.prose h2:first-of-type { margin-top: .5rem; }
.prose h3 { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; margin: 1.6rem 0 .5rem; }
.prose h4 { font-size: .95rem; font-weight: 650; margin: 1.3rem 0 .4rem; color: var(--text); }
.prose p { margin: .85rem 0; }
.prose strong { font-weight: 650; color: var(--text); }
.prose a { color: var(--sixblue); text-decoration: none; border-bottom: 1px solid rgba(43,134,214,.4); }
.prose a:hover { border-bottom-color: var(--sixblue); }
/* lists with brand bullets */
.prose ul { list-style: none; margin: .8rem 0; padding-left: 1.35rem; }
.prose ul > li { position: relative; margin: .4rem 0; }
.prose ul > li::before { content: ""; position: absolute; left: -1.1rem; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--sixblue); }
/* Tailwind's preflight resets to `list-style: none`, so we must restore
the numeric marker explicitly. Nested ordered lists use alpha → roman. */
.prose ol { margin: .8rem 0; padding-left: 1.7rem; list-style: decimal outside; }
.prose ol ol { list-style: lower-alpha outside; }
.prose ol ol ol { list-style: lower-roman outside; }
.prose ol > li { margin: .4rem 0; padding-left: .15rem; }
.prose ol > li::marker { color: var(--sixblue); font-weight: 600; }
.prose li > ul, .prose li > ol { margin: .3rem 0; }
/* KaTeX integration — slightly tighten the display-math spacing and let the
default KaTeX colour adapt to the dark theme (KaTeX uses currentColor for
most glyphs, so this just inherits .prose's text colour). Unrendered
.arithmatex spans (e.g. before the JS loads) get a subtle "loading" look
so they're not invisible. */
.prose .katex-display { margin: 1.2rem 0; }
.prose .katex { font-size: 1.05em; }
.prose .arithmatex { color: var(--muted); font-style: italic; } /* pre-render fallback */
/* Images: respect width=N attributes from so it's still reachable, but doesn't steal
space from the content. */
.manual-layout { display: flex; flex-direction: column; gap: 1rem; }
.manual-toc {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: .7rem .9rem;
}
.manual-toc summary {
cursor: pointer; list-style: none;
font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); padding: .15rem 0;
}
.manual-toc summary::after { content: '▸'; float: right; transition: transform .15s ease; }
.manual-toc[open] summary::after { transform: rotate(90deg); }
/* Desktop ≥1024px: two-column grid with grid-areas, so the HTML order is
independent of the visual layout — Site's manual.html puts TOC first,
Data's puts article first; both render the same. Article is centred
within its column so there's no awkward empty space on one side. */
@media (min-width: 1024px) {
.manual-layout {
display: grid;
grid-template-columns: 16rem minmax(0, 1fr);
grid-template-areas: 'toc article';
gap: 2.5rem;
align-items: start;
}
.manual-toc {
grid-area: toc;
position: sticky; top: 5.5rem;
max-height: calc(100vh - 7rem); overflow-y: auto;
background: transparent; border: 0; padding: 0;
}
.manual-layout > article { grid-area: article; }
/* On desktop the is always-open; hide the toggle chrome. */
.manual-toc summary { display: none; }
}
.manual-layout > article.prose { margin: 0 auto; max-width: 52rem; }
/* TOC list styling — same look in both layouts */
.manual-toc .toc ul { list-style: none; margin: .3rem 0 0; padding: 0; }
.manual-toc .toc > ul > li > ul {
margin-left: .7rem; border-left: 1px solid var(--border);
padding-left: .55rem; margin-top: .15rem;
}
.manual-toc .toc li { margin: .12rem 0; }
.manual-toc .toc a {
display: block; color: var(--muted); text-decoration: none;
font-size: .82rem; line-height: 1.4; padding: .25rem .55rem; border-radius: 7px;
transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.manual-toc .toc a:hover { color: var(--text); background: var(--surface-2); }
/* Active heading (set by manual-toc.js while scrolling) */
.manual-toc .toc a.toc-active {
color: var(--text); font-weight: 600; background: rgba(43,134,214,.10);
box-shadow: inset 2px 0 0 var(--sixblue);
}
/* ── Top bar: brand + breadcrumb ────────────────────────────────────────── */
.brandlink { padding: .2rem .3rem; border-radius: 9px; transition: background .12s ease; }
.brandlink:hover { background: var(--surface-2); }
.crumbs { display: flex; align-items: center; gap: .1rem; min-width: 0; overflow: hidden; font-size: .92rem; line-height: 1; }
.crumbs a, .crumbs span { white-space: nowrap; }
.crumbs a {
color: var(--muted) !important; font-weight: 500; text-decoration: none;
padding: .26rem .5rem; border-radius: 8px; transition: background .12s ease, color .12s ease;
}
.crumbs a:hover { color: var(--text) !important; background: var(--surface-2); }
.crumbs > span { color: var(--muted) !important; opacity: .55; padding: 0 .05rem; } /* "/" separators */
.crumbs > span:last-child { /* current page */
color: var(--text) !important; opacity: 1; font-weight: 600;
background: var(--surface-2); padding: .26rem .6rem; border-radius: 8px;
overflow: hidden; text-overflow: ellipsis;
}
/* ── Journal slide-over panel ───────────────────────────────────────────── */
.jdrawer-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s ease; }
.jdrawer-overlay.show { opacity: 1; }
.jdrawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(26rem, 100%);
display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--border);
box-shadow: -24px 0 60px -24px rgba(0,0,0,.65);
transform: translateX(100%); transition: transform .22s ease;
}
.jdrawer.show { transform: translateX(0); }
.jdrawer-head { display: flex; align-items: center; gap: .3rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--header-bg); backdrop-filter: blur(12px); }
.jdrawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.jp-compose { flex: 0 0 auto; display: flex; flex-direction: column; gap: .5rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.jp-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
.jp-item { display: block; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.jp-item:hover { background: var(--surface); }
.jp-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jp-thead { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.jp-thread > form { padding: .5rem 1rem 0; }
.jp-note { margin: .6rem 1rem 0; padding: .6rem .8rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: .85rem; }
.jp-msgs { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; padding: 1rem; }
.jp-sys { text-align: center; font-size: .72rem; color: var(--muted); font-style: italic; }
.jp-msg { display: flex; flex-direction: column; }
.jp-msg.me { align-items: flex-end; }
.jp-by { margin-top: .15rem; font-size: .64rem; color: var(--muted); }
.jp-reply { flex: 0 0 auto; display: flex; gap: .5rem; align-items: flex-end; padding: .7rem 1rem; border-top: 1px solid var(--border); background: var(--header-bg); }
.jp-reply textarea { flex: 1; }
/* text helpers */
.muted { color: var(--muted); }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* badges */
.badge {
display: inline-flex; align-items: center; gap: .3rem;
font-size: 11px; font-weight: 600; line-height: 1; padding: .3rem .5rem;
border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text);
background: var(--surface-2);
}
/* Badges route through the semantic tokens so they track the theme automatically (dark keeps its
bright-on-dark text via the --x defaults; html.light swaps in strong ink — one source of truth). */
.badge.blue { background: var(--info-tint); border-color: rgba(43,134,214,.42); color: var(--info); }
.badge.green { background: var(--pos-tint); border-color: rgba(34,160,90,.42); color: var(--pos); }
.badge.amber { background: var(--warn-tint); border-color: rgba(224,160,46,.42); color: var(--warn); }
.badge.red { background: var(--neg-tint); border-color: rgba(224,83,61,.42); color: var(--neg); }
.badge.gray { color: var(--muted); }
/* Script-run output console */
.logbox {
background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
padding: .8rem 1rem; overflow-x: auto; max-height: 28rem; white-space: pre-wrap;
word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .8rem; line-height: 1.5; color: var(--text);
}
/* buttons */
.btn {
display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
font-size: 14px; font-weight: 600; padding: .55rem .9rem; border-radius: 10px;
border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn-primary {
border: none; color: #fff;
background: linear-gradient(135deg, #0a6fc2, #00539b);
box-shadow: 0 8px 22px -10px rgba(0,83,155,.9);
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--hover-soft); }
/* inputs */
.input {
width: 100%; padding: .55rem .75rem; border-radius: 10px; color: var(--text);
background: var(--tint); border: 1px solid var(--border-strong); outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus { border-color: var(--sixblue); box-shadow: 0 0 0 3px rgba(43,134,214,.25); }
/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead th {
text-align: left; font-weight: 600; color: var(--muted);
padding: .6rem .8rem; border-bottom: 1px solid var(--border); font-size: 12px;
text-transform: uppercase; letter-spacing: .04em;
}
.table tbody td { padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--tint); }
/* section header bar (like the LaTeX/section accents) */
.section-bar {
display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 .6rem;
font-weight: 600;
}
.section-bar::before { content: ""; height: 16px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, #2b86d6, #00539b); }
/* Enhanced code blocks inside manuals (header + copy + clamp).
Applied by app/static/manual-codeblocks.js — to both the editor live
preview and the published view page. */
.codeblock {
margin: 1rem 0; border: 1px solid var(--border-strong); border-radius: 10px;
overflow: hidden; background: var(--tint);
}
.codeblock-head {
display: flex; align-items: center; gap: .5rem;
padding: .35rem .65rem; background: var(--surface-2);
border-bottom: 1px solid var(--border); font-size: 12px;
}
.codeblock-lang {
color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
font-weight: 600; font-size: 11px;
}
.codeblock-copy {
margin-left: auto; padding: .15rem .55rem; border-radius: 6px;
background: transparent; border: 1px solid var(--border-strong);
cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text);
transition: background .12s ease, border-color .12s ease;
}
.codeblock-copy:hover { background: rgba(43,134,214,.14); border-color: rgba(43,134,214,.5); }
.codeblock > pre {
margin: 0; padding: .8rem 1rem; overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .82rem; line-height: 1.5; color: var(--text);
}
.codeblock-clipped {
max-height: 22em; overflow: hidden; position: relative;
}
.codeblock-clipped::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3.5em;
background: linear-gradient(transparent, var(--bg)); pointer-events: none;
}
.codeblock-more {
display: block; width: 100%; margin: 0; padding: .4rem .5rem;
border: 0; border-top: 1px solid var(--border);
background: var(--surface-2); color: var(--text);
font-size: 12px; font-weight: 600; cursor: pointer;
}
.codeblock-more:hover { background: rgba(43,134,214,.14); }
/* Markdown editor toolbar (Data → Manuals edit page) */
.mdtb {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2rem; height: 1.9rem; padding: 0 .5rem;
font-size: 12.5px; font-weight: 600; line-height: 1;
border-radius: 6px; border: 1px solid var(--border-strong);
background: var(--surface-2); color: var(--text);
cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.mdtb:hover { background: rgba(43,134,214,.14); border-color: rgba(43,134,214,.55); }
.mdtb:active { transform: translateY(1px); }
.mdtb-sep { display: inline-block; width: 1px; height: 1.3rem; background: var(--border-strong); opacity: .7; margin: 0 .15rem; }
/* subnav: grouped pill links used by Pricelists tools bar */
.subnav { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.subnav-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.subnav-group .eyebrow { margin: 0 .25rem 0 0; opacity: .9; }
.subnav-sep { width: 1px; height: 1.1rem; background: var(--border-strong); opacity: .8; margin: 0 .15rem; }
.navchip {
display: inline-flex; align-items: center; gap: .3rem;
font-size: 12.5px; font-weight: 600; line-height: 1; padding: .35rem .65rem;
border-radius: 999px; border: 1px solid var(--border-strong);
color: var(--text); background: var(--surface-2);
text-decoration: none; transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.navchip:hover { background: rgba(43,134,214,.14); border-color: rgba(43,134,214,.55); color: var(--text); }
html.light .navchip:hover { background: rgba(43,134,214,.10); }
/* styled file input — replaces the default "Windows 95" button */
.sr-file { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
label.btn { cursor: pointer; }
/* chat bubbles */
.bubble { max-width: 85%; padding: .5rem .75rem; border-radius: 14px; font-size: 14px; }
.bubble.me { background: linear-gradient(135deg, #0a6fc2, #00539b); color: #fff; align-self: flex-end; }
.bubble.them { background: var(--surface-2); border: 1px solid var(--border); }
/* ---- light theme ---- */
:root { --header-bg: rgba(7,11,18,.72); }
html.light {
--bg: #eef2f7;
--surface: #ffffff;
--surface-2: #eef2f7;
--border: rgba(15,27,45,.10);
--border-strong: rgba(15,27,45,.18);
--hover: rgba(15,27,45,.07);
--hover-soft: rgba(15,27,45,.045);
--tint: rgba(15,27,45,.03);
--surface-opaque: #ffffff;
--surface-2-opaque: #eef2f7;
--text: #0f1b2d;
--muted: #5b6b80;
--header-bg: rgba(255,255,255,.85);
color-scheme: light;
/* strong ink on white — matches the badge-override palette (one source of truth) */
--pos: #15803d; --neg: #b91c1c; --warn: #b45309; --info: #0a5cab; --scenario: #7c3aed;
--pos-tint: rgba(21,128,61,.10); --neg-tint: rgba(185,28,28,.09); --warn-tint: rgba(180,83,9,.11);
--info-tint: rgba(43,134,214,.10); --scenario-tint: rgba(124,58,237,.10);
--menu-shadow: 0 12px 30px -8px rgba(15,27,45,.25);
--menu-bg: #ffffff;
/* solid pills keep their vivid hue; nudge red/amber a touch darker so white text stays legible */
--neg-solid: #d43f2a; --warn-solid: #c9821f;
}
html.light select, html.light option, html.light optgroup, html.light input, html.light textarea { color-scheme: light; }
html.light option, html.light optgroup { background-color: #ffffff; color: #0f1b2d; }
html.light body::before { opacity: .5; }
html.light body::after { opacity: .025; }
html.light .card, html.light .glass { box-shadow: 0 8px 24px -14px rgba(15,27,45,.25); }
/* Icon chips: the dark-theme icon colour (#cfe3fb) is invisible on light, so use
a strong blue. Home tiles keep their per-module accent (higher specificity). */
html.light .chip { color: #00539b; background: linear-gradient(135deg, rgba(43,134,214,.16), rgba(0,83,155,.08)); }