/* ================================================================== POSTO — canonical design tokens Single source of truth for the whole system. The shell links this ahead of portal.css; mountModule injects it into each module's AFTER the module's own stylesheet, so these values win the cascade and reach all four tools without any module source edit. Changing a colour here changes it everywhere — the palette below was reverted in this one file and landed on every page and every module at once. That is the whole point of this layer. ================================================================== */ /* * The dark palette also re-applies to two topbars that sit INSIDE a light * document, so the chrome stays dark there too, as it does in the shell: * * html[data-surface='light'] .topbar a module's own bar, on the * subpages opened in their own tab * (delivery-diagnosis.html). Hidden * when the module is framed. * body.standalone .sa-topbar the Header Triage page's bar. * * Without this both bars inherited the light palette: dark text on the * translucent navy bar, which over a light page reads as a slate band with * a near-invisible "Header Analyzer" link. */ :root, html[data-surface='light'] .topbar, body.standalone .sa-topbar { /* --- Surfaces: the original navy, unchanged ------------------- */ --bg: #0b1220; --bg-2: #0f1830; --surface: #131d38; --surface-2: #17244a; /* New step. The old palette had no third surface, so components invented their own one-off values for raised insets. */ --surface-3: #1e2d5c; --border: #24345f; --border-soft: #1c2a4d; --text: #e8eefc; --text-dim: #a7b4d6; --text-faint: #6f7ea8; /* --- Accent --------------------------------------------------- */ --brand: #4f8cff; --brand-2: #6ea1ff; --brand-ink: #06122e; /* Named tints so no component re-derives these by hand. */ --brand-dim: rgba(79, 140, 255, 0.14); --brand-line: rgba(110, 161, 255, 0.35); --brand-grad: linear-gradient(180deg, var(--brand-2), var(--brand)); /* --- Status --------------------------------------------------- */ --green: #2fbf71; --green-soft: rgba(47, 191, 113, 0.14); --green-line: rgba(47, 191, 113, 0.4); --yellow: #f2b134; --yellow-soft: rgba(242, 177, 52, 0.14); --yellow-line: rgba(242, 177, 52, 0.4); --red: #ef5a5a; --red-soft: rgba(239, 90, 90, 0.14); --red-line: rgba(239, 90, 90, 0.4); /* Text ON a soft status fill — an alert body, a failed badge. A separate token from --green/--yellow/--red because the two jobs pull opposite ways: the status hue has to carry on the page, while this one has to carry on a tint OF that hue. These were three hardcoded pale values living in portal.css, which is exactly how a palette drifts. On a light tint they measured 1.04:1 to 1.14:1 — not low contrast, invisible. */ --red-ink: #ffd7d7; --green-ink: #cdf3e0; --yellow-ink: #ffeccb; /* --- Derived surface treatments ------------------------------- Previously these were hand-written rgba() literals scattered through the components. Named here so nothing drifts. */ --bar-bg: rgba(11, 18, 32, 0.86); --rail-bg: rgba(15, 24, 48, 0.6); --scrim: rgba(4, 8, 18, 0.55); --hover-line: #33477d; --row-hover: rgba(23, 36, 74, 0.5); /* --- Radius: a scale, tighter inside than outside ------------- */ --radius-xs: 6px; --radius-sm: 9px; --radius: 14px; --radius-lg: 18px; /* --- Shadows: tinted navy, not pure black --------------------- */ --shadow-sm: 0 1px 2px rgba(4, 8, 18, 0.55); --shadow: 0 18px 45px -22px rgba(4, 8, 18, 0.8); --shadow-lg: 0 28px 60px -28px rgba(4, 8, 18, 0.9); --shadow-accent: 0 12px 26px -14px rgba(79, 140, 255, 0.8); /* --- Type ------------------------------------------------------ */ --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; --step--1: 0.8125rem; --step-0: 0.9375rem; --step-1: 1.0625rem; --step-2: 1.25rem; --step-3: 1.625rem; --step-4: 2.125rem; --track-display: -0.02em; --track-title: -0.012em; --track-label: 0.07em; /* --- Motion ---------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --dur-fast: 140ms; --dur: 220ms; /* --- Spacing: 4/8 rhythm --------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; /* --- Layering: a scale, not arbitrary numbers ------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-scrim: 30; --z-drawer: 40; --z-toast: 60; /* --- Page rhythm ----------------------------------------------- */ --measure: 68ch; --page-max: 1180px; } /* ================================================================== The light content surface The chrome stays dark and the content goes light. This is one palette redefining the SAME token names in a narrower scope, not a second set of names: every component already reads var(--surface), var(--text), var(--border), so nothing below this point in the cascade needs to know a theme exists. Custom properties inherit, so one declaration reaches every card, table, input and chart inside the content area. Two selectors, because the portal renders content two ways: .main the shell's content region. The topbar and sidenav are its SIBLINGS, not its children, so they keep the :root values above without being excluded by hand. html[data-surface="light"] the four framed modules. An iframe is a separate document and CSS does not cascade into it, so mount.ts marks the module's and tokens.css — which it already injects — carries the palette across the frame boundary. Every foreground below was measured against both #ffffff and the page #eef1f7 and clears WCAG AA at the smaller of the two. The first draft did not: --text-faint came out at 3.80:1 on the page background and --green at 4.43:1, both of which read fine on a designer's screen and fail for anyone else. ================================================================== */ /* body.standalone: the Header Triage page, a portal-native page opened in its own tab with no shell around it. It had no .main, so it was the one content page still entirely dark. */ .main, body.standalone, html[data-surface='light'] { /* --- Surfaces ------------------------------------------------- Not white-on-white. The page is a cool off-white and cards are true white, so a card is legible as a raised thing without a shadow doing the work. Reversed, every panel needs a drop shadow to be seen at all, and a page of floating shadows is the look this is trying not to have. */ --bg: #eef1f7; --bg-2: #e7ebf4; --surface: #ffffff; --surface-2: #f5f7fb; --surface-3: #e9edf6; --border: #d3dbe9; --border-soft: #e4e9f2; --text: #0f1a2f; /* 17.4:1 on white */ --text-dim: #46557a; /* 7.4:1 */ --text-faint: #5d6b87;/* 5.4:1, and 4.7:1 on the page background */ /* --- Accent --------------------------------------------------- The dark theme's #4f8cff is a light blue meant to glow on navy; on white it is 2.6:1 and unreadable as text. This is the same hue carried to a weight that works on a light ground, and --brand-ink flips from near-black to white because the text now sits ON the blue rather than the blue sitting on dark. */ --brand: #2563eb; --brand-2: #1d4ed8; --brand-ink: #ffffff; --brand-dim: rgba(37, 99, 235, 0.08); --brand-line: rgba(37, 99, 235, 0.3); --brand-grad: linear-gradient(180deg, var(--brand), var(--brand-2)); /* --- Status --------------------------------------------------- Darkened for a light ground; the soft fills are tints rather than the translucent overlays the dark theme uses, which turn muddy over white. */ --green: #127033; --green-soft: #e3f4e9; --green-line: #a9d9bb; --yellow: #8a5a00; --yellow-soft: #fdf1da; --yellow-line: #e8c98c; --red: #c0272d; --red-soft: #fdeaea; --red-line: #f0b6b6; /* 5.1:1, 5.4:1 and 5.3:1 on their own tints. */ --red-ink: var(--red); --green-ink: var(--green); --yellow-ink: var(--yellow); /* --- Derived -------------------------------------------------- The navy-tinted shadows above are nearly invisible on a light page and, where they are visible, look like soot. These are neutral and shallow: a light interface separates by surface and border, not by depth. */ --scrim: rgba(15, 26, 47, 0.4); --hover-line: #b6c3da; --row-hover: #f3f6fc; --shadow-sm: 0 1px 2px rgba(15, 26, 47, 0.06); --shadow: 0 10px 24px -14px rgba(15, 26, 47, 0.22); --shadow-lg: 0 18px 40px -20px rgba(15, 26, 47, 0.26); --shadow-accent: 0 8px 18px -10px rgba(37, 99, 235, 0.45); /* Native controls — select, checkbox, date picker, scrollbar — are painted by the browser, not by this stylesheet. Without this they keep rendering dark inside a light panel, which is the one part of a mixed theme that cannot be fixed with colour declarations. */ color-scheme: light; background: var(--bg); color: var(--text); } /* The original page background: two navy radials over the base. */ .page-bg { background: radial-gradient(1100px 620px at 82% -8%, #16234a 0%, transparent 58%), radial-gradient(900px 520px at 6% 2%, #122043 0%, transparent 55%), var(--bg); background-attachment: fixed; } @media (prefers-reduced-motion: reduce) { /* The same selectors as the palette above: those two topbars redeclare every token, durations included, so :root alone would leave them animating. */ :root, html[data-surface='light'] .topbar, body.standalone .sa-topbar { --dur-fast: 1ms; --dur: 1ms; } }