/* ============================================================================ Marriott Harrison design tokens. Copied from the Marketing Board (public/styles/tokens.css, 23 September 2026) with one edit: the @font-face rules keep their local() sources and lose their url() ones, because this app ships no font files. Re-copy from the board and re-apply that edit rather than editing values here. Copied verbatim from the design-system project (_ds/marriott-harrison-design-system-f9b54917.../tokens/*.css) so the app has no dependency on that project at runtime. If the design system changes, re-copy this file rather than editing values here. ONE EXCEPTION, and it is marked where it starts: the block headed "Added here, not copied" at the foot of :root. Those values are ours — the Final UI artboards use a family of blue tints the design system does not publish, and the semantic aliases beside them split roles this app needs split. They are kept together, and last, so that a re-copy of the design system replaces everything above them and leaves them standing. ========================================================================== */ /* ---------------------------------------------------------------- webfonts -- Aptos is Microsoft's brand typeface and is not on a public font CDN. Drop the .ttf files into ./fonts/ to self-host them (see fonts/README.md). Without them the stack falls back to a locally installed Aptos — which most MH machines have via Microsoft 365 — and then to system-ui / Segoe UI. */ @font-face { font-family:"Aptos"; src:local("Aptos Light"); font-weight:300; font-display:swap } @font-face { font-family:"Aptos"; src:local("Aptos"); font-weight:400; font-display:swap } @font-face { font-family:"Aptos"; src:local("Aptos Italic"); font-weight:400; font-style:italic; font-display:swap } @font-face { font-family:"Aptos"; src:local("Aptos SemiBold"); font-weight:600; font-display:swap } @font-face { font-family:"Aptos"; src:local("Aptos Bold"); font-weight:700; font-display:swap } @font-face { font-family:"Aptos"; src:local("Aptos ExtraBold"); font-weight:800; font-display:swap } @font-face { font-family:"Aptos"; src:local("Aptos Black"); font-weight:900; font-display:swap } @font-face { font-family:"Aptos Display"; src:local("Aptos Display"); font-weight:400; font-display:swap } @font-face { font-family:"Aptos Display"; src:local("Aptos Display Bold"); font-weight:700; font-display:swap } @font-face { font-family:"Aptos Mono"; src:local("Aptos Mono"); font-weight:400; font-display:swap } @font-face { font-family:"Aptos Mono"; src:local("Aptos Mono Bold"); font-weight:700; font-display:swap } :root { /* ---- Ink & paper (primary brand base) ---- */ --mh-black: #000000; --mh-white: #ffffff; /* ---- Greys (from MH theme dk2 / lt2 + tints) ---- */ --mh-grey-900: #1a1a1a; --mh-grey-800: #2b2d31; --mh-grey-700: #54575c; /* secondary text on white */ --mh-grey-500: #878787; /* FILLS ONLY — 3.59:1 on white, so never as type */ --mh-grey-600: #666666; /* muted text, captions — 4.86:1 at worst, see below */ --mh-grey-400: #c6c6c6; /* borders, dividers */ --mh-grey-200: #ececec; /* subtle fills */ --mh-grey-100: #f5f5f4; /* app canvas */ /* ---- Blue accent family ---- */ --mh-blue: #00a0de; --mh-blue-deep: #1b4f9e; --mh-blue-pale: #badde5; --mh-blue-link: #0563c1; /* ---- Olive highlight ---- */ --mh-olive: #8d983e; /* ---- Semantic status ---- */ --mh-success: #8d983e; --mh-danger: #c0392b; --mh-warning: #d9992b; --mh-info: #00a0de; /* Soft status fills, taken from the Badge component's palette */ --mh-success-soft: #eaeed2; --mh-success-ink: #5c651f; --mh-danger-soft: #f7e3e1; --mh-danger-ink: #8f2318; --mh-warning-soft: #faf0dc; --mh-warning-ink: #8a5f14; /* ---- Semantic aliases ---- */ /* --surface-page is the one value in this copied block that the colour pass changes; it points at a tint from the added block at the foot of the file. Left in place rather than moved down so the alias list stays whole. */ --surface-page: var(--mh-blue-075); --surface-card: var(--mh-white); --surface-inverse: var(--mh-black); --surface-subtle: var(--mh-grey-200); --surface-accent: var(--mh-blue-pale); --text-strong: var(--mh-black); --text-body: var(--mh-grey-900); --text-muted: var(--mh-grey-700); /* Was --mh-grey-500 (#878787), which measured 3.59:1 on white and worse on every other ground the app puts it on — 3.24:1 on the page surface, 3.04:1 on --mh-grey-200 — and it is the colour behind the great majority of the 575 text elements that failed WCAG AA on 1 September. #666666 clears the 4.5:1 floor on all four grounds (5.74 / 5.18 / 5.28 / 4.86) and stays a visible step lighter than --text-muted at 7.25:1, so the hierarchy the design depends on survives. #6b6b6b was the first candidate and reached only 4.51:1 on the darkest ground, which is too close to the line to hold if a fill ever darkens. --mh-grey-500 stays as it was, for fills. */ --text-subtle: var(--mh-grey-600); --text-inverse: var(--mh-white); --text-link: var(--mh-blue-link); --text-accent: var(--mh-blue-deep); --border-strong: var(--mh-black); --border-default: var(--mh-grey-400); --border-subtle: var(--mh-grey-200); --accent-primary: var(--mh-black); --accent-secondary: var(--mh-blue); --focus-ring: var(--mh-blue); /* ---- Typography ---- */ --font-display: "Aptos Display", "Aptos", system-ui, sans-serif; --font-sans: "Aptos", system-ui, "Segoe UI", sans-serif; --font-mono: "Aptos Mono", ui-monospace, "SF Mono", monospace; --fw-light:300; --fw-regular:400; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --fw-black:900; --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.5; --lh-relaxed:1.65; --ls-tight:-0.02em; --ls-wide:0.04em; --ls-overline:0.14em; /* ---- Spacing, radii, shadows, motion ---- */ --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --radius-none:0; --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px; --border-hairline:1px; --border-medium:2px; --shadow-xs:0 1px 2px rgba(0,0,0,.06); --shadow-sm:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.08); --shadow-lg:0 12px 32px rgba(0,0,0,.12); --ease-standard:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; /* ========================================================================== ADDED HERE, NOT COPIED — the colour pass. Everything below this line is ours and must survive a re-copy of the design system. See the note at the head of this file. The aliases in the second half still resolve to the values the app has always used. They are wired through app.css first and re-pointed after, so that the commit which introduces them changes nothing on screen and the commits which change the colour are each one line of value. ====================================================================== */ /* ---- Blue tints. The Final UI artboards use these; the design system does not publish them. ---- */ --mh-blue-050: #f1f6fb; /* group bands */ --mh-blue-075: #eef4f9; /* the canvas */ --mh-blue-100: #dbe9f6; /* table and section headers */ --mh-blue-150: #e1eaf4; /* meter track */ --mh-blue-200: #b9d3ec; /* the rule under a blue header */ --mh-blue-ink: #0c3f7a; /* type on a pale blue fill */ --mh-blue-slate:#9db4cc; /* the "Not started" dot */ /* ---- The one green that is not olive. Emerald, chosen by Neil. The brand's green is --mh-olive and it cannot carry type at pill size in either direction, so a green pill needs values the palette did not have. Olive still means healthy and in flight — On track, the success wash, the burn-up. This means finished. Two greens, two different good things. The ink is dark green rather than black or white: white on emerald is 2.1:1 and unusable, and a neutral black would drop the pill out of its own colour family. Paired, they measure 5.8:1. ---- */ --mh-green: #50c878; --mh-green-ink: #0b3d22; /* ---- The navigation column's ground. Neil's value, 2 September 2026, replacing --mh-blue-deep #1b4f9e. It was chosen over the palette's teal on measurement, not taste. The column re-grounds its own ink as white at two alphas, and the whole two-tier system was cut against the old navy at luminance .0829. Teal #2c6570 is LIGHTER than that (.1101), which put --text-subtle at 4.02:1, under the 4.5:1 floor; thinning the ink to .76 bought 4.57:1 and cost the tier, leaving the quiet label and the loud one .3 apart. A darker teal #285b65 restored .68 to 4.51:1 -- by 0.01, and it fails again if the ground is four points lighter per channel, which matters because that hex was a visual read of a palette image rather than a sample of it. This ground is DARKER than the navy it replaces (.0344), so it does the opposite: every pair gains. --text-subtle goes back to .68 at 6.67:1 with the tier intact, and the 3px --mh-blue marker on the selected item clears the 3:1 of WCAG 1.4.11 for the first time -- 4.20:1, against 2.66:1 on the old navy and 2.21:1 on the teal. That marker had been accepted as a knowing failure since the colour pass. The measured pairs live in app.css where the column sets them. It is not one of the ten colours in the firm's secondary palette, and it is not in the design system either. Neil's call, and worth knowing before anyone treats it as brand. ---- */ --mh-navy: #233453; /* ---- Two more soft/ink pairs. Not new vocabulary: this completes the set above for the two task states that had none. ---- */ --mh-neutral-soft:#e8eef5; --mh-neutral-ink:#41586f; --mh-info-soft: #d9f0fb; --mh-info-ink: #03607f; /* ---- The split. --surface-page painted six surfaces — the canvas, table headers, the capacity header, the digest rail, the internal-client body and the sign-in screen. The artboards give those three different colours, so the roles have to be separable before any of them can move. ---- */ --surface-header: var(--mh-blue-100); /* table and section header bands */ --surface-band: var(--mh-blue-050); /* the group row inside a table */ --border-header: var(--mh-blue-200); /* the rule under a header band */ --border-band: var(--mh-blue-100); /* the rule under a group row */ --header-ink: var(--mh-blue-deep); /* the label inside a header band */ --track: var(--mh-blue-150); /* the empty part of a meter */ --nav-surface: var(--mh-navy); /* the left navigation column */ /* ---- The type scale. An audit on 30 August 2026 measured 66 distinct type treatments across the two surfaces — five heading sizes, six mono sizes and eight letter-spacings all doing the work of three or four. Almost every one of them came from a `font:` shorthand written inline in JavaScript, where no stylesheet could reach it and no two screens could be compared. These are the sizes the application is allowed to use. The utility classes that consume them are in app.css under "the type scale", and tools/check-inline-type.py fails a commit that sets type inline again. Add a size here only when a real role has no size — not to accommodate one screen. ---- */ --fs-title-window: 42px; /* a front page: the internal-client window, the digest */ --fs-title-record: 34px; /* one record or form, reached from a parent */ --fs-title-page: 30px; /* a list screen */ --fs-figure: 32px; /* a headline numeral */ --fs-head-lg: 18px; /* the name of an item in a list of items */ --fs-head: 15px; /* a heading inside a card or a rail */ --fs-head-sm: 14px; /* the head of a card that holds a table */ /* THE SMALL END WAS LIFTED ON 1 SEPTEMBER 2026. A census of every rendered text element across nineteen surfaces found 51% of all text — 37,868 of 74,680 characters — set below 12px, the largest single block being 22,337 characters at 11.5px. No accessibility standard was breached: WCAG sets no minimum font size, and the 18.66px/24px figures in it are contrast thresholds, not size floors. But 11.5px prose is below every practical guideline going, so: nothing that is a sentence is now under 12.5px. Body, the heads and the titles did NOT move. They were already at or above any floor worth citing, and lifting them would compound the layout risk — fixed grid columns, nowrap pills, a 104px tag gutter — for no gain. The one rule that had to hold is that no heading ends up smaller than the body it heads, which is why --fs-copy went to 13.5 rather than to 14. */ --fs-body: 14px; /* prose somebody is meant to read */ --fs-copy: 13.5px; /* prose in a card or a rail */ --fs-note: 13px; /* a note attached to a control or a row */ --fs-tiny: 12.5px; /* the smallest thing that is still a sentence */ --fs-mono: 12.5px; /* a date, a reference, a count, in a row */ --fs-mono-sm: 12px; /* the same, as a secondary annotation */ --fs-label-lg: 12.5px; /* a group heading */ --fs-label: 11px; /* an overline, a column heading */ --fs-label-sm: 10.5px; /* a label on a cell, in the stacked layout */ /* Two trackings, not eight. --ls-overline (0.14em) is every structural label; --ls-pill is tighter because it sits inside a coloured fill where the fill already does the separating. */ --ls-pill: .08em; } /* ----------------------------------------------------------- on a phone ---- The three title sizes, and only those, are redefined at the app's narrow breakpoint. Redefining the tokens rather than the rules means every class that reads them moves together — including `.t-title-record` and the sign-in card, both of which had no narrow rule at all and so kept their desktop size while everything around them shrank. The desktop order is 30 < 34 < 42; before this, a phone showed 24 < 32 < 34, so the request form and the project record carried the largest title on the screen. 640px, matching the last breakpoint in app.css. Changing one without the other is how a scale ends up with a size that only exists between two widths. */ @media (max-width:640px) { :root { --fs-title-window: 32px; --fs-title-record: 28px; --fs-title-page: 24px; } }