/* ================================================================================================ BRAND-002 — THE ONE FILE THAT CONTROLS THE WHOLE COLOUR SCHEME ================================================================================================ TO RE-SKIN THIS PLATFORM FOR A DIFFERENT OPERATOR, EDIT THE ~15 VALUES IN ":root" BELOW. Nothing else. No other stylesheet, no view, no rebuild. ------------------------------------------------------------------------------------------------ WHY THIS EXISTS ------------------------------------------------------------------------------------------------ Colours were previously written as literal hex values scattered through the views and several stylesheets, and three different Bootstrap versions each brought their own palette. Changing the scheme meant finding every occurrence, and missing one left a stray colour from the old brand on some screen nobody checked. Custom properties fix that: they cascade, they can be overridden in one place, and unlike a CSS preprocessor they need no build step — which matters here, because this project has no asset pipeline. ------------------------------------------------------------------------------------------------ HOW THE PALETTE IS BUILT ------------------------------------------------------------------------------------------------ Only FOUR decisions actually matter: --brand-primary the main identity colour: header, primary buttons, active nav --brand-secondary supporting colour for accents and secondary actions --brand-success / --brand-danger money in / money out, and pass / fail states Everything else is derived from those, so a new operator changes four values and gets a consistent result rather than having to pick thirty that agree with each other. ------------------------------------------------------------------------------------------------ CONTRAST IS NOT DECORATION ------------------------------------------------------------------------------------------------ This is a financial application: people read balances and transaction states on it, often on a phone, often in bad light. Every text/background pair below meets WCAG AA (4.5:1 for body text, 3:1 for large text and UI boundaries). That is also why --brand-danger is a deep red rather than a bright one, and why status text is never colour ALONE — each status carries a label as well, because roughly 1 in 12 men has some form of colour-vision deficiency and "the red row" is not a usable instruction for them. If you change the palette, keep the contrast. A pale-on-white primary will look fine to whoever picked it and be unreadable outdoors. ================================================================================================ */ :root { /* ============================================================ THE FOUR DECISIONS — change these to re-skin ============================================================ */ --brand-primary: #1d4ed8; /* headers, primary buttons, active nav — royal blue from the EzyTM mark */ --brand-secondary: #475569; /* accents, secondary actions — neutral slate */ --brand-success: #15803d; /* credit, success, completed */ --brand-danger: #b3261e; /* debit, failure, destructive actions */ /* The EzyTM magenta from the logo. An ACCENT, not a workhorse: notification dots, count badges, small highlights. Large magenta surfaces are what made the old UI feel noisy. */ --brand-accent: #c60d59; --brand-accent-light: #fdeaf2; /* Supporting states. Amber is deliberately dark enough for white text. */ --brand-warning: #a16207; /* pending, needs attention */ --brand-info: #0369a1; /* neutral information */ /* ============================================================ DERIVED — usually no need to touch these ============================================================ */ --brand-primary-dark: #1e40af; --brand-primary-light: #e8effd; --brand-primary-contrast: #ffffff; /* text ON primary */ --brand-secondary-dark: #334155; --brand-secondary-light: #eef2f7; --brand-success-light: #e7f6ec; --brand-danger-light: #fdeceb; --brand-warning-light: #fdf5e3; --brand-info-light: #e6f2fa; /* ============================================================ SURFACES AND TEXT ============================================================ */ --surface-page: #f4f6f9; /* app background */ --surface-card: #ffffff; /* cards, panels, tables */ --surface-sunken: #eef1f5; /* table headers, wells */ --surface-border: #d8dee7; --text-primary: #1f2933; /* body text — 13.6:1 on card */ --text-secondary: #52606d; /* labels, help text — 7.1:1 on card */ --text-muted: #6b7784; /* timestamps, hints — 4.8:1 on card */ --text-inverse: #ffffff; /* ============================================================ SHAPE AND DEPTH ============================================================ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --shadow-md: 0 2px 8px rgba(16, 24, 40, .10); --shadow-lg: 0 8px 24px rgba(16, 24, 40, .14); /* Single place to change motion. Also the hook for reduced-motion below. */ --transition-fast: 120ms ease; --transition-base: 200ms ease; /* ============================================================ MAIN NAVIGATION MENU — COLOUR, FONT AND SIZE, ALL FROM HERE Change --menu-bg and the entire menu changes, at EVERY screen width. That was not true before: the menu colour was written three different times inside a