/* ============================================================ ma-shared brand tokens v1.0 (2026-06-04) Source of truth: M+A 2026 brand kit (ma-risk-brand plugin). Copy this file into /site/ unchanged. Tool-specific styles build ON these variables — never redefine them locally. ============================================================ */ :root { /* ---- The four brand colors. Never introduce a fifth. ---- */ --navy: #121536; /* Midnight Navy — headlines, primary text, dark surfaces */ --gold: #B38B3E; /* Heritage Gold — accent only: dividers, the + in M+A, callouts */ --cream: #F4F1EB; /* Vellum Cream — default light surface (prefer over pure white) */ --stone: #E6E2D8; /* Stone Warm-Gray — secondary panels, quiet dividers */ /* Navy tints — the only sanctioned way to extend the palette (charts, hover states) */ --navy-75: rgba(18, 21, 54, .75); --navy-50: rgba(18, 21, 54, .50); --navy-25: rgba(18, 21, 54, .25); --navy-10: rgba(18, 21, 54, .10); /* Gold + stone tints for backgrounds (10% per brand spreadsheet spec) */ --gold-10: rgba(179, 139, 62, .10); --stone-40: rgba(230, 226, 216, .40); /* ---- Workflow status — Navy/Stone/Gold, used for states and badges ---- active / in force / running → navy paused / pending / queued → stone attention / needs review → gold */ --status-active: var(--navy); --status-active-bg: var(--navy-10); --status-paused: #6a6a7a; /* readable text on stone bg */ --status-paused-bg: var(--stone-40); --status-attention: #8a6a1f; /* darkened gold for text contrast */ --status-attention-bg: var(--gold-10); /* ---- Alert exception (Kaylin, 2026-06-04) ---- Transient success/error FEEDBACK in internal tool UI may use red/green — they need to stand out. Allowed: error banners, failed-action messages, success confirmations, validation errors. NEVER in client-facing output (proposals, comparisons, SOV, reports, email) and NEVER as passive state color (use the status tokens above). */ --alert-error: #b91c1c; --alert-error-bg: #fef2f2; --alert-error-line: #fca5a5; --alert-ok: #166534; --alert-ok-bg: #f0fdf4; --alert-ok-line: #86efac; /* ---- Neutrals (derived, not “new colors”) ---- */ --text: #1a1d3a; /* body text — navy softened for long reading */ --muted: #6a6a7a; /* captions, secondary text (≥14px for contrast) */ --line: #d8d3c5; /* hairline borders on cream */ --paper: #ffffff; /* cards on cream when elevation is needed */ /* ---- Typography ---- */ --font-display: 'Fraunces', Georgia, serif; /* headlines, brand moments */ --font-body: 'Source Serif 4', Georgia, serif; /* long-form: letters, reports, narrative */ --font-ui: 'Inter', -apple-system, sans-serif; /* UI, tables, captions, labels */ } /* One Google Fonts line — identical in every tool’s : */ /* ---- Canonical component classes (use as-is or extend) ---- */ .brand-tag, .label-smallcaps { /* the gold small-caps label treatment */ font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .badge { font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 10px; display: inline-block; } .badge-active { color: var(--cream); background: var(--status-active); } .badge-paused { color: var(--status-paused); background: var(--status-paused-bg); } .badge-attention { color: var(--status-attention); background: var(--status-attention-bg); border: 1px solid var(--gold); } .alert { font-family: var(--font-ui); font-size: 13px; padding: 10px 14px; border-radius: 8px; border: 1px solid; } .alert-error { color: var(--alert-error); background: var(--alert-error-bg); border-color: var(--alert-error-line); } .alert-ok { color: var(--alert-ok); background: var(--alert-ok-bg); border-color: var(--alert-ok-line); } .gold-rule { border: 0; border-top: 1px solid var(--gold); margin: 16px 0; }