/* ============================================================================ Medlink Connect COMMAND — shared theme tokens Source of truth: medlink_brand_v2/THEME_TOKENS.md Link this on EVERY COMMAND page, BEFORE the page's own stylesheet, so both the top bar (command-nav.js) and the page body read the same variables. command-nav.js sets and persists the choice. Page CSS should reference these vars (var(--paper), var(--card), etc.) instead of hard-coded colours, so the whole page themes as one. RULES (see BRAND_GUIDE.md §2.4): - The logo mark NEVER themes (canonical / reverse / mono only). - Status colours (--ok/--warn/--bad) NEVER theme — constant meaning. - Only chrome, the section/product label and the UI accent follow the theme. ============================================================================ */ /* Constants — identical in every theme */ /* Constants + LIGHT-scheme status defaults (light schemes inherit these). Status text colours are AA on near-white cards; pill -bg are pale tints. */ /* Constants + LIGHT-scheme status defaults (light schemes inherit these). Status text colours are AA on near-white cards; pill -bg are pale tints. */ :root{ --ok:#2D6A4F; --ok-bg:#E6EFE9; --warn:#975C11; --warn-bg:#FBEED4; --bad:#B13D2E; --bad-bg:#FBEAE5; --brand-navy:#00467D; --brand-sky:#0096D7; --brand-sky-high:#33B0E0; --brand-cream:#F2EBDD; } /* NAVY — default. Dark teal chrome, cool light surface. */ html[data-theme="navy"]{ --bar:#0E3144; --bar-2:#0A2535; --bar-line:#1D4258; --ink:#F2EBDD; --muted:#8CA6B2; --accent:#C9A768; --accent-deep:#A88547; --accent-text:#7D6840; --paper:#EEF1F4; --card:#FFFFFF; --card-line:#DDE3EA; --body-ink:#1D2B36; --body-muted:#5C6E7C; --pop:#0E3144; --pop-line:#1D4258; --pop-hover:#143B50; --ring-a:#0096D7; --ring-b:#0A5A8C; } /* DARK — navy full-dark. Status colours brightened for dark cards (Rule B). */ html[data-theme="dark"]{ --bar:#0B2C4A; --bar-2:#07203A; --bar-line:#173A5C; --ink:#EAF1F6; --muted:#7F97AB; --accent:#C9A768; --accent-deep:#A88547; --accent-text:#C9A768; --paper:#061A2C; --card:#0D2C46; --card-line:#1A3C5C; --body-ink:#EAF1F6; --body-muted:#8EA6B8; --pop:#0B2742; --pop-line:#1A3C5C; --pop-hover:#123255; --ring-a:#0096D7; --ring-b:#0A5A8C; --ok:#5BD08A; --ok-bg:rgba(91,208,138,0.14); --warn:#F4B844; --warn-bg:rgba(244,184,68,0.14); --bad:#FF6B6B; --bad-bg:rgba(255,107,107,0.10); --bad-border:rgba(255,107,107,0.30); } /* SLATE — graphite full-dark, neutral. Status brightened for dark cards. */ html[data-theme="slate"]{ --bar:#242A33; --bar-2:#1B2027; --bar-line:#39424F; --ink:#ECEFF3; --muted:#9AA4B0; --accent:#C9A768; --accent-deep:#A88547; --accent-text:#C9A768; --paper:#161A20; --card:#212833; --card-line:#343D49; --body-ink:#ECEFF3; --body-muted:#9AA4B0; --pop:#212833; --pop-line:#39424F; --pop-hover:#2A3340; --ring-a:#5B6B7D; --ring-b:#39424F; --ok:#66D19E; --ok-bg:rgba(102,209,158,0.12); --warn:#F6C143; --warn-bg:rgba(246,193,67,0.12); --bad:#FF6B6B; --bad-bg:rgba(255,107,107,0.10); --bad-border:rgba(255,107,107,0.28); } /* CREAM — navy + gold on warm cream (Medlink editorial). Warm + distinct from navy. */ html[data-theme="cream"]{ --bar:#0E3144; --bar-2:#0A2535; --bar-line:#1D4258; --ink:#F4EEE0; --muted:#93A7B0; --accent:#C9A768; --accent-deep:#A88547; --accent-text:#7D6840; --paper:#F7F1E5; --card:#FFFDF7; --card-line:#E8E0CE; --body-ink:#143A52; --body-muted:#756B5B; --pop:#0E3144; --pop-line:#1D4258; --pop-hover:#143B50; --ring-a:#0096D7; --ring-b:#0A5A8C; } /* GOLD — warm espresso chrome, ivory body. */ html[data-theme="gold"]{ --bar:#221A11; --bar-2:#1A140D; --bar-line:#3D3120; --ink:#F7F1E3; --muted:#B39D76; --accent:#D2AB5E; --accent-deep:#A87F33; --accent-text:#7C6537; --paper:#F3ECDB; --card:#FDF8EC; --card-line:#E3D6BA; --body-ink:#2C2316; --body-muted:#76674B; --pop:#241B11; --pop-line:#3D3120; --pop-hover:#2E2417; --ring-a:#E6C074; --ring-b:#9A7830; } /* ROSE — wine chrome, blush body. */ html[data-theme="rose"]{ --bar:#39202C; --bar-2:#2E1923; --bar-line:#5A3445; --ink:#FAF2F3; --muted:#C69AA6; --accent:#D98AA3; --accent-deep:#B5657F; --accent-text:#8D5A6A; --paper:#F6ECEE; --card:#FDF6F7; --card-line:#ECD6DB; --body-ink:#37212A; --body-muted:#7D5E68; --pop:#3A212D; --pop-line:#5A3445; --pop-hover:#462937; --ring-a:#E79CB4; --ring-b:#9F566B; } /* Base page background. command-nav.js sets data-theme on , so paint the themed paper there: without it, a page whose own palette defines its bg token on body[data-theme] leaves the element on the light :root default and a grey strip shows below short content (recurred on the MYOB dashboard + admin pages). Pages may still set their own body background; this just stops the gap. */ html[data-theme]{ background: var(--paper); } /* ═══════════════════════════════════════════════════════════════════════════ COMMAND APP SURFACE MAPPING — one ladder, every app, every theme. ─────────────────────────────────────────────────────────────────────────── foundry.css, vcenter.css and horizon.css each carried their own private copy of this block. They drifted, and all three copies had the same defect: four ink levels that resolved to two, and two rule weights that resolved to one. Nothing could be emphasised because everything was already the same weight, which is what "the pages look muted" turned out to mean. It lives here now. An app stylesheet should define only what is genuinely its own (its data-viz accents, its layout metrics) and inherit the rest. THE INK LADDER SPANS --body-ink -> --body-muted AND STOPS THERE. --body-muted is already each theme's dimmest readable tone (~5:1 on card), so a step derived BELOW it — muted faded into the card — falls under WCAG AA. That shipped once. Measured on all six themes, this ladder gives: --on-ink-100 11.7 – 14.5 : 1 --on-ink-80 10.3 – 12.4 : 1 --on-ink-60 6.8 – 7.7 : 1 --on-ink-30 4.9 – 5.5 : 1 Four distinct levels, all above AA 4.5:1. Verify with foundry/dev/contrast.mjs after touching any of it. ═════════════════════════════════════════════════════════════════════════ */ :root { --bg:var(--paper); --ink-2:var(--card); --ink-3:var(--card); --ink-4:var(--card); --border:var(--card-line); --border2:var(--card-line); --rule-mid:var(--card-line); --rule-soft:color-mix(in srgb, var(--card-line) var(--rule-mix), var(--card)); --text:var(--body-ink); --text2:var(--body-ink); --text3:var(--body-muted); --on-ink-100:var(--body-ink); --on-ink-80:color-mix(in srgb, var(--body-ink) 82%, var(--body-muted)); --on-ink-60:color-mix(in srgb, var(--body-muted) 68%, var(--body-ink)); --on-ink-30:var(--body-muted); --gold:var(--accent); --gold-soft:var(--accent-deep); --sky:var(--brand-sky); --sky-high:var(--brand-sky-high); --cream:var(--card); /* status → shared, constant MEANING across themes (the hues themselves are re-picked per theme above, brightened for dark cards) */ --red:var(--bad); --amber:var(--warn); --teal:var(--ok); --red-d:var(--bad-bg); --amber-d:var(--warn-bg); --teal-d:var(--ok-bg); /* data-viz accents — deliberately constant across all six themes */ --blue:#4d9fff; --violet:#9b7fff; --orange:#ff8c42; --green:#34d4b0; --blue-d:rgba(77,159,255,.13); --violet-d:rgba(155,127,255,.13); --orange-d:rgba(255,140,66,.13); --font:'Instrument Sans','Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; --topbar-h:46px; /* HOW STRONG a tint has to be, as a token, because the answer differs by theme. A status colour mixed into --card at 22% is a clear pastel on a white card and is swallowed by a near-black one. Anything that must vary by theme belongs here as a value, never as a per-component dark rule. */ --tint-chip:22%; /* small coloured chips: tags, counts, verdict pips */ --tint-loud:30%; /* the chips meant to interrupt you: fail and warn */ --tint-wash:13%; /* large tinted surfaces: KPI tiles, alert panels */ --tint-faint:7%; /* barely-there tint on a card-sized block */ --tint-edge:36%; /* the border on anything tinted */ --tint-row:3%; /* whole-row wash on a failing table row */ --pass-ink:90%; /* strength of a quiet "this is fine" tick */ --rule-mix:55%; /* hairline rules, mixed toward the surface */ } /* The two FULL-DARK themes. `navy` is the light-surface default despite the name. Only the tint strengths and the hairline weight change; the ink ladder above is already correct on a dark card because it never fades toward the surface. */ html[data-theme="dark"], html[data-theme="slate"] { --tint-chip:32%; --tint-loud:52%; --tint-wash:20%; --tint-faint:13%; --tint-edge:50%; --tint-row:6%; --pass-ink:80%; --rule-mix:78%; } /* ============================================================================ LAYOUT — the COMMAND page standard (QHD-first). Added 2026-09-03. WHY THIS IS HERE: command-core owns colour AND layout. Before this section the shared theme was colour-only, so every app invented its own shell — we ended up with caps of 900/1000/1280/1300px. On a 2560px QHD monitor (what the team actually uses) a 1000px column is 39% of the screen: the "massive margins / one-third of the screen" problem. The fix is not a bigger cap, it is NO cap — full-bleed with a fixed gutter, and grids that re-flow. Reference implementation: foundry/baselines.php (JD). This section is that page's shell, promoted to the core so every page inherits it. HOW TO USE (see CLAUDE.md gate 6):
DO NOT re-declare these in app CSS, and never put a px max-width on the page shell. Cap a READING column if you must (prose, a form) — never the page. ============================================================================ */ :root{ --mlc-gutter:28px; /* side gutter, <2200px */ --mlc-gutter-qhd:48px; /* side gutter, QHD and wider */ --mlc-pad-top:22px; --mlc-pad-bottom:70px; --mlc-gap:14px; /* grid gap */ --mlc-gap-qhd:16px; --mlc-card-min:280px; /* auto-fit card floor — drives column count */ --mlc-card-min-qhd:340px; /* wider cards on QHD, not just more of them */ --mlc-read:78ch; /* measure: a PROSE column (line length governs)*/ --mlc-doc:1200px; /* measure: a standalone DOCUMENT — prose + cards (the tech info-cards / capability reports). Wider than prose because it carries card grids, but still a measure: these are read, not operated. Owned here so the reports share one width instead of each picking its own 820/960/1000/1040px. */ } /* Full-height shell. Scoped to a direct child of so an app's inner .content block (a generic word) is never hijacked. */ body > .content, .mlc-shell{ min-height:calc(100vh - var(--topbar-h)); display:flex; flex-direction:column; } /* The page surface: full width, gutter only. max-width:none is deliberate and defensive — it beats an inherited cap from an older app stylesheet. */ .page-body, .mlc-page{ width:100%; max-width:none; padding:var(--mlc-pad-top) var(--mlc-gutter) var(--mlc-pad-bottom); } /* QHD step. Media queries cannot read custom properties, so 2200px is literal: it is 2560px minus browser chrome, i.e. "this is a QHD monitor". */ @media (min-width:2200px){ .page-body, .mlc-page{ padding:26px var(--mlc-gutter-qhd) 80px; } } /* Standard card grid. auto-fit + minmax is what makes a page use the whole screen without a single hard-coded column count. */ .mlc-grid{ display:grid; gap:var(--mlc-gap); grid-template-columns:repeat(auto-fit,minmax(var(--mlc-card-min),1fr)); } @media (min-width:2200px){ .mlc-grid{ gap:var(--mlc-gap-qhd); grid-template-columns:repeat(auto-fit,minmax(var(--mlc-card-min-qhd),1fr)); } } /* Measures. Long-form content is the one thing that must NOT be full-bleed — line length, not screen width, governs readability. A DASHBOARD is never capped; a DOCUMENT is. These are the only two legitimate caps, and both live here so the value is changed in one place rather than negotiated per page. */ .mlc-read{ max-width:var(--mlc-read); margin-inline:auto; } .mlc-doc { max-width:var(--mlc-doc); margin-inline:auto; } /* Section label + hairline rule (the foundry .slabel pattern, shared). */ .mlc-slabel{ font-size:10.5px; font-family:var(--mono); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-30); margin:28px 0 13px; display:flex; align-items:center; gap:10px; } .mlc-slabel:first-of-type{ margin-top:6px; } .mlc-slabel::after{ content:''; flex:1; height:1px; background:var(--rule-soft); }