/* ============================================================================ TripSkyWay Brand System - THE central colour and type tokens. ============================================================================ WHY THIS FILE EXISTS, AND WHY IT IS A SEPARATE FILE --------------------------------------------------- The public site's design tokens are declared at the top of website.css, in the frozen Phase 1 block that must stay byte-identical (md5 17eccab5a262ebeeadf699bc7e3bd057 over its first 610 lines). The admin's live in main.css, the customer portal's in portal.css. Editing any of them in place is either forbidden or means touching three files for one decision. Custom properties do not need that. A later declaration of the same property on the same selector wins, so this file - loaded LAST in every layout - re-points the tokens the rest of the CSS already consumes. Nothing else had to be rewritten: `var(--tsw-primary)` appears throughout website.css and now resolves to the brand blue. That is the whole mechanism. THE BRAND COLOURS ARE NOT A PREFERENCE -------------------------------------- Sampling logo.png returns exactly two ink colours: #0000FF over 8,581 px and #FFA500 over 5,864 px. The orange is used verbatim. The blue is not: pure #0000FF is a display primary, not a UI colour - it vibrates against white and leaves no room for a darker hover state. #111E8E is the brand's navy rendering of it, and it measures 13.12:1 against white, so it works as button fill AND as link text, which #0000FF does not. ORANGE IS A FILL, NEVER A TEXT COLOUR. #FFA500 measures 1.97:1 on white. Any orange that carries words uses --tsw-accent-text (#946000, 5.34:1). That rule already existed for the Phase 2 gold tokens; it is now stated once, here. WHAT THIS FILE DOES NOT DO. It sets no layout, no spacing, no radius, no shadow and no font size. Only colour and the font stack. The pages look exactly as they did, in the brand's colours. ========================================================================== */ :root { /* ---- Brand constants ------------------------------------------------- The two colours the logo is made of. Everything below is derived from them; nothing else in the codebase should introduce a brand hue. */ --tsw-brand-blue: #111E8E; --tsw-brand-orange: #FFA500; /* ---- Blue ramp - mixed toward black for states, toward white for tints. Contrast against white, measured: 700 16.12:1, 600 14.56:1, 500 13.12:1. The 050/100 tints are backgrounds only; brand blue on 050 is 11.75:1. */ --tsw-blue-700: #0C1563; --tsw-blue-600: #0E1A79; --tsw-blue-500: #111E8E; --tsw-blue-300: #7C83C1; --tsw-blue-100: #E2E4F1; --tsw-blue-050: #F1F2F8; /* ---- Orange ramp. `-text` is the only member safe to put words in. `-light` and `-press` are NOT freshly derived: they are the values the Phase 2 homepage already shipped and had reviewed. --p2-gold-light in particular carries TEXT on the navy sections (#FFC061 on #08152F = 9.51:1) and is paired throughout website.css with matching rgba(255,192,97,...) borders and washes. Deriving a new tint here would have moved that contrast and desynchronised those pairs for no brand reason, so the ramp adopts the shipped values instead - which is what lets the p2 tokens below re-point to it without changing a single pixel. */ --tsw-orange-hover: #E69500; --tsw-orange-press: #E08E00; --tsw-orange-500: #FFA500; --tsw-orange-light: #FFC061; --tsw-orange-050: #FFF6E6; --tsw-accent-text: #946000; /* 5.34:1 on white */ /* ---- Semantic UI aliases. These are what components should reach for. */ --tsw-ui-primary: var(--tsw-blue-500); --tsw-ui-primary-hover: var(--tsw-blue-600); --tsw-ui-primary-press: var(--tsw-blue-700); --tsw-ui-primary-tint: var(--tsw-blue-050); --tsw-ui-accent: var(--tsw-orange-500); --tsw-ui-accent-hover: var(--tsw-orange-hover); /* ---- One font stack for the whole product. The public site and the admin had two stacks that differed by a single entry: "SF Pro Text". On Apple platforms -apple-system already resolves to that family, and elsewhere the name matches nothing - so carrying it in the shared stack changes no rendering on any platform while letting both surfaces name the same token. Sizes, weights and line heights are untouched: this is the stack, not the scale. */ --tsw-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tsw-font-serif: Newsreader, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif; /* ====================================================================== RE-POINTED TOKENS Everything below already exists elsewhere and is already consumed by hundreds of rules. Re-pointing here is what makes the brand reach the whole product without editing those rules - or the frozen block. ====================================================================== */ /* Public website (website.css :root, line 5 - frozen, so overridden here) */ --tsw-primary: var(--tsw-blue-500); --tsw-primary-dark: var(--tsw-blue-600); --tsw-primary-050: var(--tsw-blue-050); --tsw-accent: var(--tsw-orange-500); --tsw-accent-dark: var(--tsw-orange-hover); --tsw-font: var(--tsw-font-sans); /* Admin panel (main.css :root). The admin keeps its own neutrals, density and layout - only the accent joins the brand family. */ --color-primary: var(--tsw-blue-500); --color-primary-600: var(--tsw-blue-600); --color-primary-700: var(--tsw-blue-700); --color-primary-50: var(--tsw-blue-050); --font-sans: var(--tsw-font-sans); /* Customer + supplier portals (portal.css :root) */ --pcolor-primary: var(--tsw-blue-500); } /* ---------------------------------------------------------------------------- Public website - Phase 2 editorial tokens. SCOPE MATTERS HERE, AND IT IS THE ONLY PLACE IN THIS FILE THAT IT DOES. The --p2-* tokens are NOT declared on :root in website.css; they are declared on `.tsw-p2` (website.css line 624), the wrapper the Phase 2 pages put around their own markup. That namespacing is deliberate - it is what stops the editorial tokens reaching anything outside those sections. Re-declaring them on :root here would have quietly undone that. Measured, at 768px: .header-cta .btn-primary sits OUTSIDE .tsw-p2 and had been falling back to `Georgia, serif`; with --p2-serif visible at :root it resolved to the full Newsreader stack, grew from 120px to 129px and pushed the page 30px wider than the viewport on /, /packages and /offers. Re-pointing must therefore happen at exactly the scope the originals use, never at a broader one. Every value below is byte-identical to the one website.css authors, so this block changes nothing on its own. What it buys is the indirection: a custom brand colour set in Site Identity re-points --tsw-blue-* on :root, and the homepage now follows it instead of staying on the shipped navy. --p2-gold-light and --p2-gold-press are ABSENT on purpose - see the ramp note above; the ramp adopted their values rather than the reverse, so website.css keeps authoring them next to the rgba() literals they are paired with. -------------------------------------------------------------------------- */ .tsw-p2 { --p2-blue: var(--tsw-blue-500); /* was #1118E8 - the brand navy transposed */ --p2-blue-dark: var(--tsw-blue-600); --p2-gold: var(--tsw-orange-500); --p2-gold-text: var(--tsw-accent-text); --p2-serif: var(--tsw-font-serif); } /* ---------------------------------------------------------------------------- No rule overrides live here. Every place that used to hard-code a brand hue - the admin rich-text editor, the communications tabs and pagination, the image picker's focus rings, the sign-in wash, the portal brand mark and focus ring, the dashboard hero, the Hero Slider and Website CMS preview panels, the shared invoice and receipt - now reads a token from the block above. This file therefore decides the brand; it does not patch the components that use it. -------------------------------------------------------------------------- */