/* =================================================================== MTS Brand Tokens =================================================================== Single source of truth for the MTS visual identity. Consumed by both the Ltac product app and the mtsCorp marketing site via the Mts.Branding Razor Class Library at /_content/Mts.Branding/. Link this file BEFORE the consuming app's own CSS so app-specific styles can override case-by-case. Identity v2.4 (2026-08-18). Spec of record: Mts.Branding/StyleGuide/mts-style-guide.html — §4 the mark's colors, §4.1 the product semantic palette, §5 typography and self-hosting. Decisions this file implements: Registrar Navy is the primary button on both properties (D3); links split by role, blue for navigation and Heritage Red + chevron for forward motion (D2); Signal Red #B91C1C is the one alarm color and --mts-danger points at it (D4); Archivo is self-hosted (D1). */ /* ── Archivo — the one family (style guide §5) ───────────────────────── SELF-HOSTED, deliberately: a Google Fonts is a third-party request on every page of a clinical compliance app, it fails behind hospital egress filters (leaving the fallback stack showing), and it costs a DNS + TLS handshake to fonts.gstatic.com before any text can paint. These are the same variable woff2 subsets Google serves, on our own origin. One file covers weights 100–900, so the whole ramp — body 400, medium 500, bold 700, wordmark-weight 800, display 900 — is ~35 KB, less than a single static weight used to cost. font-display:swap means text paints immediately in the fallback and reflows when Archivo lands; unicode-range means latin-ext only downloads when an accented character actually appears on the page. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Real italics, not synthesized slant — the product sets Scheduled status and Retired chips in italic, and a browser-obliqued grotesk looks broken at 0.72rem. */ @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/archivo-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/archivo-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --------------------------------------------------------------- v2.4 identity — "The Forward Mark" Source of record: Mts.Branding/StyleGuide/mts-style-guide.html Logo/favicon assets: /_content/Mts.Branding/branding/mts-logo-*.svg --------------------------------------------------------------- */ --mts-navy: #16283C; /* Registrar Navy — structure, wordmark, dark grounds */ --mts-heritage-red: #A93730; /* the chevron & square atoms — never body text, never error states */ --mts-paper: #F3EEE3; /* Record Paper — preferred background */ --mts-paper-deep: #E8E1D1; --mts-ink: #141110; --mts-ink-soft: #5a534a; --mts-rule: #cfc6b3; /* Extended palette — product & communications only, never in the mark. These three are ANCHORS (fills: chart bars, databars, dots). Two of them cannot carry text — Ledger Amber measures 2.9:1 and Slate Teal 3.5:1 on the App Ground, both under the 4.5:1 floor — so each has a darkened text form and a chip pair in the semantic families below. */ --mts-slate-teal: #6F8B97; /* charts, secondary UI, illustration */ --mts-verified-green: #2E7D5B; /* semantic only: passed / complete / current */ --mts-ledger-amber: #C08A2D; /* semantic only: due soon / in progress */ /* Type — one family, weighted by job (style guide §5). The fallbacks are ordered so an Archivo failure lands on a grotesk of similar width and x-height, not on Times: dense tables must not reflow into a different row count. */ --mts-font-sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif; /* Data, IDs, codes, hashes — style guide §5 "Data / IDs" ramp row. */ --mts-font-mono: 'Cascadia Code', ui-monospace, 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* Brand palette. Primary is Registrar Navy (decision D3, 2026-08-18): the identity's structural color, and the pre-rebrand #2c5f8a survives nowhere in the guide. Contrast on the App Ground goes 6.8:1 -> 15:1. */ --mts-primary: #16283C; --mts-primary-hover: #0F1C2B; --mts-primary-rgb: 22, 40, 60; --mts-surface: #EDEFF3; --mts-page-bg: #FAFBFC; --mts-border: #DCDFE4; --mts-text: #1F2937; --mts-text-muted: #6c757d; --mts-text-subtle: #94a3b8; /* ================================================================= PRODUCT SEMANTIC PALETTE (added 2026-08-18) ================================================================= The mark uses two colors. The working screens need more: six workflow meanings, an AI-assist surface family, and a danger color that is visibly NOT the brand red. These are derived from the identity's own atoms rather than imported, so the app reads as the same world as the mark. Three forms per family, one job each: (anchor) fills only — chart bars, databars, dots -text status text on the App Ground >= 4.5:1 -tint/-ink flat chip pair >= 4.5:1 Ratios are measured against #FAFBFC (WCAG 2.1). The app maps these onto meanings in app-components.css; the meaning->hue rule lives there, the values live here. Never introduce a hue at the app layer. ----------------------------------------------------------------- */ /* Registrar Blue — assigned / not started / scheduled / published, and working links. Navy lifted toward Slate Teal: the "on the books" color. */ --mts-blue: #2A5674; /* 7.6:1 as text */ --mts-blue-tint: #E2EAF0; --mts-blue-ink: #24485E; /* 8.0:1 on tint */ /* Ledger Amber — in progress / awaiting / superseded / due soon. */ --mts-amber-text: #8C6210; /* 5.2:1 (the #C08A2D anchor is 2.9:1 — fills only) */ --mts-amber-tint: #F5EAD3; --mts-amber-ink: #77510D; /* 5.9:1 on tint */ /* Registrar Plum — ready for approval / in review / revision Major, and the AI-assist surfaces. A muted aubergine between Navy and Heritage Red. */ --mts-plum: #5E4370; /* 8.1:1 as text */ --mts-plum-tint: #EDE7F2; --mts-plum-ink: #563D68; /* 7.7:1 on tint */ --mts-plum-wash: #F6F2F9; /* guided/assisted panel ground */ --mts-plum-edge: #DCCFE8; /* its border */ /* Verified Green — approved / completed / effective / meets criteria. */ --mts-green-text: #25684B; /* 6.4:1 (the #2E7D5B anchor fills databars) */ --mts-green-tint: #E1EFE7; --mts-green-ink: #1F5C41; /* 6.6:1 on tint */ /* Slate Teal — charts, evidence types, and the one lifecycle state between review and effective: signed, awaiting promote. */ --mts-teal-text: #3D5A66; /* 7.1:1 (the #6F8B97 anchor is 3.5:1 — fills only) */ --mts-teal-tint: #E0EAEE; --mts-teal-ink: #33505C; /* 7.0:1 on tint */ /* Slate Neutral — cancelled / draft / inactive / retired. */ --mts-slate-text: #64748b; /* 4.7:1 */ --mts-slate-tint: #EEF1F4; --mts-slate-ink: #4B5563; /* 6.7:1 on tint */ /* Signal Red — overdue / critical / rejected / destructive verbs. The guide (§4) requires an error red "visibly distinct from Heritage Red"; this names it. Cooler and sharper than Heritage Red's brick, and it is now the ONLY alarm color: --mts-danger points here too, so the app no longer carries Bootstrap's #dc3545 alongside it. */ --mts-signal-red: #B91C1C; /* 6.2:1 as text; white on it is 6.5:1 */ --mts-signal-hover: #9A1A12; --mts-signal-tint: #FBE7E4; --mts-signal-ink: #9A1A12; /* 7.0:1 on tint */ --mts-signal-edge: #EFB9B0; /* border on an armed destructive control */ --mts-danger: var(--mts-signal-red); --mts-danger-hover: var(--mts-signal-hover); --mts-focus-ring: #258cfb; /* Radii */ --mts-radius-sm: 6px; --mts-radius-md: 8px; --mts-radius-lg: 10px; } /* Bootstrap 5 variable overrides */ :root, [data-bs-theme="light"] { --bs-primary: var(--mts-primary); --bs-primary-rgb: var(--mts-primary-rgb); --bs-border-color: var(--mts-border); --bs-body-color: var(--mts-text); --bs-body-bg: var(--mts-page-bg); /* Links are Registrar Blue — see "the two link roles" below. Bootstrap 5.3 computes `a { color: rgba(var(--bs-link-color-rgb), …) }`, so the -rgb pair is the one that actually applies; setting only --bs-link-color leaves links on Bootstrap's default blue. Both are set, and the plain form is kept because components elsewhere still read it. */ --bs-link-color: var(--mts-blue); --bs-link-color-rgb: 42, 86, 116; /* #2A5674 */ --bs-link-hover-color: var(--mts-navy); --bs-link-hover-color-rgb: 22, 40, 60; /* #16283C */ --bs-secondary-color: var(--mts-text-muted); --bs-emphasis-color: var(--mts-text); --bs-danger: var(--mts-danger); --bs-body-font-family: var(--mts-font-sans); } /* ── The two link roles (decision D2, 2026-08-18) ────────────────────── Resolved in favour of the product, then applied to both properties so the rule is semantic rather than per-site: NAVIGATION / UTILITY -> Registrar Blue, no chevron. "Go look at this thing." Row actions, inline prose links, footer, nav. This is the common case and it must not read as an alert: a dense table whose every row ends in "View - Edit - Retire" set in Heritage Red looks like a table full of warnings, and at 0.72rem Heritage Red #A93730 and Signal Red #B91C1C are not reliably distinguishable. The guide's own "never body text" rule already excludes red from inline links inside prose. FORWARD MOTION -> Heritage Red + the typed chevron. "Here is what comes next." Hero CTAs, "Continue to certification", breadcrumb separators, next-step cards. This is the chevron atom doing its actual job (the guide's Link/Next ramp row), and keeping it rare is what keeps it meaningful. Use .chev-next (below) for the second role; plain links get the first. */ /* Body text is Archivo everywhere the consuming app doesn't say otherwise. */ body { font-family: var(--mts-font-sans); } /* "The next" affordance — the typed chevron. Forward-motion links and breadcrumbs only, never buttons: inside a solid navy button it inherits paper-white, so it stops being the Heritage Red atom and becomes punctuation on a control that is already its own affordance. The gap is a margin, not a literal space — a space collapses in the button/flex contexts this would otherwise land in. */ .chev-next { color: var(--mts-heritage-red); font-weight: 500; } .chev-next:hover { color: #8C2D27; } .chev-next::after { content: "\203A"; margin-left: 0.25em; } /* Bootstrap primary button uses MTS navy, not Bootstrap blue */ .btn-primary { --bs-btn-bg: var(--mts-primary); --bs-btn-border-color: var(--mts-primary); --bs-btn-hover-bg: var(--mts-primary-hover); --bs-btn-hover-border-color: var(--mts-primary-hover); --bs-btn-active-bg: var(--mts-primary-hover); --bs-btn-active-border-color: var(--mts-primary-hover); --bs-btn-disabled-bg: var(--mts-primary); --bs-btn-disabled-border-color: var(--mts-primary); } .btn-outline-primary { --bs-btn-color: var(--mts-primary); --bs-btn-border-color: var(--mts-primary); --bs-btn-hover-bg: var(--mts-primary); --bs-btn-hover-border-color: var(--mts-primary); --bs-btn-active-bg: var(--mts-primary); --bs-btn-active-border-color: var(--mts-primary); } /* Focus ring (matches product app convention) */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--mts-focus-ring); }