/* ========================================================================== Vistaria — token layer for the `fusion` design system. The single source of truth for colour, spacing and type on any page that declares . Components read these variables and never hard-code a value; the components live in components.css. ── Why every rule below is scoped to [data-ds="fusion"] ─────────────────── ⚠️ Two design systems live in this app at once, and three token NAMES mean DIFFERENT things in each: token legacy (paper/emerald) fusion --surface #FFFFFF, a sheet of paper a raised panel --signal emerald, the brand accent what the SYSTEM says (data) --bg2 (does not exist) the page's second ground `lab_results.html` and eighteen other templates read the legacy meanings from the inline block in `_lab_head.html`. If these definitions were global they would silently repaint those pages — the accent would change colour on templates nobody touched. Scoping is what lets the two systems coexist until the legacy branch is retired. ── Palette: Vistaria's own, deliberately NOT the sister's ───────────────── Parity wave 3 ports the ARCHITECTURE (role names, scales, the light/dark contract) and nothing else. The values here are Vistaria's existing paper-and-emerald identity, carried over verbatim from the legacy block: a warm paper ground, ink text, emerald as the accent, indigo as the second voice. The sister's deep-navy cinema palette is not used and must not be copied in — two products that look identical are one product. ── Roles, not colour names ─────────────────────────────────────────────── action = what we ask of the reader (CTA, primary link, chosen plan) signal = what the system reports (data, status, a measured result) danger = a bad finding or an error warn = a soft caution The separation never moves. If you need a new role, add a token here and give it a value in BOTH themes — a colour defined in only one theme is a bug that stays invisible until someone flips the switch. ── Light first ────────────────────────────────────────────────────────── ⚠️ Inverted from the sister, on purpose. Vistaria's ground is paper, so `:root` is LIGHT and the dark block overrides it. That also means a browser with JavaScript disabled — which never gets `data-theme` set — lands on the light theme, which is this product's default rather than an accident. ── Contrast ───────────────────────────────────────────────────────────── Every text pair below is ≥4.5:1 against the surface it sits on, and every control border is ≥3:1 (WCAG 1.4.11) — a decorative card edge does not need that ratio and does not have it, which is why --line and --line-field are two different tokens. ========================================================================== */ html[data-ds="fusion"]{ color-scheme:light; /* ══ Ground and surfaces ════════════════════════════════════════════════ A ladder, lightest to most raised. Paper is the page; a panel sits on it; a raised thing sits on the panel. */ --bg:#FAFAF7; /* the page itself */ --bg2:#F3F4EF; /* a second ground — inset strips, code blocks */ --surface:#FFFFFF; /* a panel/card standing on the page */ --raised:#FFFFFF; /* a panel on a panel — separated by shadow, not hue */ --float:#FFFFFF; /* toasts, install prompts, anything truly floating */ --inset:#EFF1EA; /* pressed/recessed areas */ /* ══ Lines ═════════════════════════════════════════════════════════════ */ --line:rgba(20,24,31,.13); /* ordinary card and table edges */ --line-soft:rgba(20,24,31,.07); /* the faintest separator, and the grid */ --line-bright:rgba(20,24,31,.30); /* an emphasised edge */ /* ⚠️ Form-control borders are their own token: 1.4.11 wants 3:1 for a border that IDENTIFIES a control, which the decorative --line above neither has nor needs. #767F8C is 3.87:1 against the lighter of --bg/--surface. */ --line-field:#767F8C; /* ══ Text ══════════════════════════════════════════════════════════════ Worst case across BOTH grounds (--bg and --surface), measured: text 17.02:1 · muted 5.74:1 · faint 4.86:1. */ --text:#14181F; --muted:#5A6472; --faint:#666F7D; /* ══ Roles ═════════════════════════════════════════════════════════════ */ --action:#0E7C66; /* emerald: the brand's ask */ --action-hi:#0B6553; /* hover/active */ --on-action:#FFFFFF; /* 5.13:1 on emerald */ /* ⚠️ Emerald does two jobs, and on a light ground they need different values: as a FILL it carries white text; as INK on paper it must clear 4.5:1 itself. #0B6152 on #FAFAF7 is 7.06:1. */ --action-text:#0B6152; --signal:#2D3A8C; /* indigo: what the system reports */ --signal-faint:rgba(45,58,140,.08); --danger:#B4231F; --on-danger:#FFFFFF; --warn:#8A5109; /* darkened from the legacy #B45309 to clear 4.5:1 */ --ok:#0E7C66; /* rgb triplets for the places that need alpha (nav backdrop, row hover, modal scrim). Kept in sync by hand with the hex above them. */ --bg-rgb:250,250,247; --surface-rgb:255,255,255; --raised-rgb:255,255,255; --text-rgb:20,24,31; --action-rgb:14,124,102; --signal-rgb:45,58,140; --danger-rgb:180,35,31; --warn-rgb:138,81,9; /* ══ Elevation ═════════════════════════════════════════════════════════ On paper, depth is a hard offset shadow, not a blur — that is the print character of this brand and the reason a card reads as a plate. */ --el-1:2px 2px 0 var(--line); --el-2:4px 4px 0 var(--line); --el-3:0 18px 40px rgba(20,24,31,.14); /* ══ Scales — shared by both themes, never repeated below ══════════════ */ --s2:.25rem; --s3:.5rem; --s4:.75rem; --s5:1rem; --s6:1.5rem; --s7:2rem; --s8:3rem; --s9:4rem; --s10:6rem; --r-s:6px; --r-m:10px; --r-l:16px; --r-xl:24px; --w:72rem; /* the page's comfortable maximum */ --grid:64px; --ease:cubic-bezier(.22,1,.36,1); /* ⚠️ Type: Vazirmatn carries Arabic-script glyphs only, so it is named for RTL locales and nowhere else. Selected by the document's own dir attribute rather than a template variable, so a plain .css file can make the decision and every page gets the same answer. */ --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial, "Noto Sans","Noto Sans SC","Noto Sans JP","Noto Sans KR",sans-serif; --mono:'SF Mono',ui-monospace,SFMono-Regular,Consolas,monospace; /* ══ z-index — declared once so nobody invents a 9999 ══════════════════ ⚠️ These exact numbers are part of the ported architecture: components.css assumes this ladder. Renumbering here without renumbering there puts the toast behind the modal. */ --z-nav:80; --z-progress:90; --z-modal:100; --z-toast:110; /* ══ The paper artifact ════════════════════════════════════════════════ A sample report or receipt — an OBJECT lying on the page, not a surface of it, so it keeps the same colour in both themes. ⚠️ On this brand the page is ALREADY paper, so unlike the sister the artifact must carry a visible edge in light or it dissolves into the ground. Its cream is deliberately warmer than --bg for the same reason. */ --paper:#FBF7EC; --paper-ink:#1A1710; --paper-ink-2:#4A4335; --paper-dim:#6B6455; --paper-accent:#2D3A8C; /* the brand's indigo, as ink */ --paper-rule:rgba(26,23,16,.14); --paper-edge:rgba(26,23,16,.16); /* ══ Ambient effects — intensity is a token, not a number in a component ══ Kept far lower than the sister's: those values were tuned for a dark cinema ground where a warm wash reads as atmosphere. On paper the same strength reads as a printing fault. */ --amb-warm:.035; --amb-cool:.02; --amb-spot:.025; /* ⚠️ `overlay` lightens on a light ground and the grain disappears; `multiply` is the correct blend for paper. */ --grain-op:.022; --grain-blend:multiply; --g-mix:black; /* what gradients fade toward */ /* ══ Derived surfaces ══════════════════════════════════════════════════ */ --scrim:rgba(20,24,31,.55); /* modal backdrop */ --sheen:rgba(255,255,255,.55); /* the highlight edge on a plate */ --shimmer:rgba(var(--text-rgb),.05); /* skeleton sweep */ --spinner-track:rgba(var(--text-rgb),.20); --tint-hover:rgba(var(--text-rgb),.06); } html[data-ds="fusion"][dir="rtl"]{ --font:'Vazirmatn',system-ui,-apple-system,sans-serif; } /* ══ Dark ════════════════════════════════════════════════════════════════ Only the tokens whose VALUE changes. The scales above are shared and are deliberately not repeated — a scale that exists twice drifts. */ html[data-ds="fusion"][data-theme="dark"]{ color-scheme:dark; --bg:#0B0F17; --bg2:#0E1420; --surface:#121826; --raised:#161D2E; --float:#161D2E; --inset:#0A0F19; --line:rgba(148,163,184,.18); --line-soft:rgba(148,163,184,.08); --line-bright:rgba(148,163,184,.34); --line-field:#7C8BA3; /* 5.13:1 worst case */ --text:#E8ECF2; /* 14.95:1 worst case */ --muted:#A4B0C2; /* 8.08:1 */ --faint:#8E9AAD; /* 6.23:1 */ /* Emerald cannot survive on a dark ground — it goes to the lime the brand already uses in dark, which is the identity, not a substitution. */ --action:#B4F53C; --action-hi:#C7FF63; --on-action:#06241C; --action-text:#B4F53C; /* on dark it is legible as ink too */ --signal:#8B9CFF; --signal-faint:rgba(139,156,255,.12); --danger:#F87171; --on-danger:#1A0B0B; --warn:#FBBF24; --ok:#B4F53C; --bg-rgb:11,15,23; --surface-rgb:18,24,38; --raised-rgb:22,29,46; --text-rgb:232,236,242; --action-rgb:180,245,60; --signal-rgb:139,156,255; --danger-rgb:248,113,113; --warn-rgb:251,191,36; /* A hard offset plate reads as damage on a dark ground; depth becomes light. */ --el-1:0 1px 0 rgba(148,163,184,.12); --el-2:0 6px 18px rgba(0,0,0,.45); --el-3:0 18px 44px rgba(0,0,0,.6); /* The paper artifact keeps its colour — it is an object, not a surface — but on a dark ground it no longer needs a drawn edge to be seen. */ --paper-edge:transparent; /* On a dark ground the washes can carry more weight, `overlay` is once again the right blend, and gradients fade toward white. */ --amb-warm:.09; --amb-cool:.035; --amb-spot:.05; --grain-op:.028; --grain-blend:overlay; --g-mix:white; --scrim:rgba(3,6,15,.72); --sheen:rgba(255,255,255,.18); --spinner-track:rgba(var(--text-rgb),.28); --tint-hover:rgba(var(--text-rgb),.08); }