/* * PMESC design tokens: the single source of colour for the marketing site * AND the portal (adopted 23 Sep 2026, owner's 10-colour system). * * Hierarchy (visual weight, not quotas): * Deep Navy 30% · Chrome White 30% · St Tropaz 15% · Picton Blue 8% · * Beryl 5% · Chateau 4% · Cornflower 3% · Gossip 2% · Khaki 2% · Violet 1% * * Rule: components use the SEMANTIC tokens (--color-*), never the raw * palette, so a future colour change happens here and nowhere else. * * Accessibility adjustments (every text/background pair was contrast-checked; * WCAG 2.2 AA = 4.5:1 for text, 3:1 for UI boundaries): * - White text on Picton Blue is 2.3:1, so Picton surfaces (hover, info * buttons, active indicators) carry DEEP NAVY text instead (5.0:1). * - White text on Chateau Green is 3.5:1, so success buttons use Chateau * 16% darker (--pm-chateau-strong, 4.7:1). * - Khaki #C3B091 is only 2.1:1 on white. It is fine for decoration, but * form-field borders use Khaki 17% darker (--pm-khaki-strong, 3.0:1), * and khaki is never used for text. * - Badge/alert text uses a darkened shade of its own colour (4.8:1+) on a * 14% tint of that colour. Status is never conveyed by colour alone: * every badge also has a word and a glyph. * - The palette has no red. Real ERRORS (failed validation, failed sends) * keep one error red, the only colour outside the palette. * Violet is for attention, never for errors (per the brief). */ :root { /* ---- the 10-colour palette (exact values) ---- */ --pm-navy: #123b5d; /* Deep Navy: brand, nav, headings, text */ --pm-tropaz: #2f5d8a; /* St Tropaz: primary buttons, links, secondary text */ --pm-picton: #45b5e6; /* Picton Blue: hover, active indicators, focus, info */ --pm-beryl: #4baf8a; /* Beryl Green: light success, approved */ --pm-chateau: #3a9b68; /* Chateau Green: success, completed */ --pm-cornflower: #6495ed; /* Cornflower Blue: secondary information */ --pm-gossip: #d5f2a3; /* Gossip Green: soft highlight, selected */ --pm-violet: #bb3385; /* Medium Red Violet: rare special attention */ --pm-chrome: #f5f7f5; /* Chrome White: app background */ --pm-khaki: #c3b091; /* Indian Khaki: decorative borders/dividers only */ /* ---- shades & tints derived from the palette (for contrast) ---- */ --pm-white: #ffffff; --pm-chateau-strong: #318257; /* Chateau -16%: white text 4.7:1 */ --pm-chateau-deep: #296e4a; /* Chateau -29%: success button hover */ --pm-khaki-strong: #a29278; /* Khaki -17%: input borders 3.0:1 */ --pm-navy-75: #4d6c86; /* Deep Navy 75% tint: tertiary text 5.1:1 */ --pm-navy-45: #94a7b6; /* disabled text / placeholders' icons */ --pm-navy-20: #d0d8df; /* default dividers */ --pm-navy-12: #e3e7ec; /* subtle card borders */ --pm-navy-06: #f1f3f5; /* alternate surface */ --pm-on-navy-muted: #c3ced4; /* Chrome 78% over Navy: muted text on navy 7.2:1 */ /* ---- semantic tokens (use these in components) ---- */ --color-primary: var(--pm-navy); --color-secondary: var(--pm-tropaz); --color-info: var(--pm-picton); --color-success-light: var(--pm-beryl); --color-success: var(--pm-chateau); --color-blue-light: var(--pm-cornflower); --color-highlight: var(--pm-gossip); --color-accent: var(--pm-violet); /* marketing pages re-point this name, see marketing-theme.css */ --color-attention: var(--pm-violet); /* same colour, collision-free name */ --color-background: var(--pm-chrome); --color-muted: var(--pm-khaki); --color-surface: var(--pm-white); --color-surface-alt: var(--pm-navy-06); --color-text: var(--pm-navy); --color-text-secondary: var(--pm-tropaz); --color-text-tertiary: var(--pm-navy-75); --color-text-on-dark: var(--pm-chrome); --color-text-on-dark-muted: var(--pm-on-navy-muted); --color-link: var(--pm-tropaz); --color-link-hover: var(--pm-navy); --color-border: var(--pm-navy-12); --color-border-strong: var(--pm-navy-20); --color-border-input: var(--pm-khaki-strong); --color-border-decorative: var(--pm-khaki); --color-focus: var(--pm-picton); /* input focus border (+ ring) */ --color-focus-outline: var(--pm-tropaz); /* keyboard outline on light surfaces (6.4:1) */ --color-focus-outline-on-dark: var(--pm-picton); /* keyboard outline on navy (5.0:1) */ --color-focus-ring: rgba(69, 181, 230, 0.15); --color-row-hover: #f0f7fa; /* buttons */ --btn-primary-bg: var(--pm-tropaz); --btn-primary-bg-hover: var(--pm-navy); --btn-primary-text: var(--pm-white); --btn-success-bg: var(--pm-chateau-strong); --btn-success-bg-hover: var(--pm-chateau-deep); --btn-info-bg: var(--pm-picton); --btn-info-text: var(--pm-navy); /* status: tint background + darkened same-hue text (all 4.8:1+) */ --status-success-bg: #e3f1ea; --status-success-text: #2c744e; /* completed */ --status-approved-bg: #e6f4ef; --status-approved-text: #32755c; /* confirmed/approved */ --status-active-bg: #e5f5fc; --status-active-text: #2b708f; /* new/active */ --status-info-bg: #e9f0fc; --status-info-text: #4668a6; /* secondary info */ --status-progress-bg: #e2e8ef; --status-progress-text: #2f5d8a; /* in progress */ --status-attention-bg: #f5e2ee; --status-attention-text: #ae2f7c; /* special attention */ --status-soft-bg: var(--pm-gossip); --status-soft-text: #2a704b; /* soft success */ --status-neutral-bg: #f7f4f0; --status-neutral-text: #756a57; /* closed/declined */ --status-error-bg: #f7e9e8; --status-error-text: #b3261e; /* real errors only */ /* charts: use in this order; lighter tints only for extra series */ --chart-1: var(--pm-navy); --chart-2: var(--pm-tropaz); --chart-3: var(--pm-picton); --chart-4: var(--pm-beryl); --chart-5: var(--pm-chateau); --chart-6: var(--pm-cornflower); --chart-7: var(--pm-violet); /* elevation: restrained, navy-tinted */ --shadow-1: 0 1px 2px rgba(18, 59, 93, 0.06), 0 1px 3px rgba(18, 59, 93, 0.06); --shadow-2: 0 4px 14px rgba(18, 59, 93, 0.08); --shadow-3: 0 14px 36px -12px rgba(18, 59, 93, 0.25); }