/* ========================================================================== CostGuard – design tokens The ONE place a colour literal may appear. Loaded first on every route – public and application alike – so a brand change moves both. The public child theme (costguard-theme.css) and the application design system (costguard-app-system.css) map these tokens onto Canvas and Bootstrap; neither declares a colour of its own. Rules the tokens encode: one accent, in a fill role (--cg-accent, carrying --cg-on-accent) and a text role (--cg-accent-text); green only for money saved; amber only for risk. ========================================================================== */ /* -------------------------------------------------------------------------- CostGuard design tokens Colour palette follows Microsoft Fluent / Fluent UI naming conventions: https://fluent2.microsoft.design/color Primary → Blue scale (Fluent "Brand" blue) Neutral → Slate scale (Fluent "Neutral" grey) Semantic → Fluent success / warning / error All surface, text, border and shadow tokens are defined once here. Light/dark overrides swap only the semantic aliases (--cg-*), leaving the raw palette constants untouched. -------------------------------------------------------------------------- */ :root { /* ── Raw palette – never use these directly in components ───────────── */ /* Blue (Fluent Brand Blue) */ --cg-blue-900: #1e3a8a; --cg-blue-700: #1d4ed8; --cg-blue-600: #2563eb; --cg-blue-500: #3b82f6; --cg-blue-400: #60a5fa; --cg-blue-100: #dbeafe; --cg-blue-50: #eff6ff; /* Slate (Fluent Neutral) */ --cg-slate-950: #0f172a; --cg-slate-800: #1e293b; --cg-slate-700: #334155; --cg-slate-500: #64748b; --cg-slate-400: #94a3b8; --cg-slate-300: #cbd5e1; --cg-slate-200: #e2e8f0; --cg-slate-100: #f1f5f9; --cg-slate-50: #f8fafc; /* Dark surfaces – ink navy, deeper and bluer than the stock slate */ --cg-navy-950: #050914; --cg-navy-900: #080d1a; --cg-navy-800: #0f1729; --cg-navy-700: #172138; /* Ink and paper – the light theme text and its warm near-white surfaces */ --cg-ink-950: #0a1020; --cg-ink-600: #566079; --cg-ink-400: #8a93a8; --cg-paper-50: #faf8f4; --cg-paper-100: #f2efe8; --cg-paper-200: #e7e2d8; --cg-paper-300: #d5cfc2; /* Cobalt – the one accent. 700 to 400 carry white text at AA or better; 300 is the accent as text on a dark surface. */ --cg-cobalt-700: #1b37b3; --cg-cobalt-600: #2447d8; --cg-cobalt-500: #3a5cf0; --cg-cobalt-400: #2f50e0; --cg-cobalt-300: #93a9ff; /* Semantic – Fluent recommended */ --cg-success: #0a7a4b; /* Money saved */ --cg-success-light: #d1fae5; --cg-warning: #b45309; /* Risk – amber-700, AA as text on paper */ --cg-warning-light: #fef3c7; --cg-error: #c50f1f; /* Fluent communication red */ --cg-error-light: #fde8e8; --cg-info: var(--cg-cobalt-600); --cg-info-light: var(--cg-blue-50); /* Service status – the text and icon role of each public status level. They are their own colours on purpose: green stays money saved and amber stays risk, so neither --cg-success nor --cg-warning is reused. Each one clears 4.5:1 on --cg-bg, --cg-bg-elevated and --cg-bg-subtle, and on its own 12% tint over each of them. A status never rests on colour alone: an icon and a label always go with it. */ --cg-status-operational: #15703f; --cg-status-degraded: #855600; --cg-status-outage: #b3261e; --cg-status-maintenance: #5b3fc4; --cg-status-unknown: #4d566b; /* ── Semantic aliases – swap per theme below ─────────────────────────── */ /* Accent – one colour, in three roles. --cg-accent is a FILL and always carries --cg-on-accent text at AA or better, in both themes. --cg-accent-text is the accent used AS text or as an icon on a page surface. The two differ in the dark theme, where a fill dark enough for white text is too dark to read as text on navy. */ --cg-accent: var(--cg-cobalt-600); --cg-accent-rgb: 36, 71, 216; --cg-accent-hover: var(--cg-cobalt-700); --cg-accent-text: var(--cg-cobalt-600); --cg-on-accent: #ffffff; --cg-accent-soft: rgba(36, 71, 216, 0.08); --cg-accent-glow: rgba(36, 71, 216, 0.14); /* Solid, because a focus ring has to clear 3:1 against the surface it sits on and the translucent blue it replaced did not. */ --cg-focus-ring: var(--cg-cobalt-600); /* Brand – kept as aliases of the accent so every existing rule follows it */ --cg-brand: var(--cg-accent); --cg-brand-rgb: var(--cg-accent-rgb); --cg-brand-hover: var(--cg-accent-hover); --cg-brand-subtle: var(--cg-blue-900); --cg-brand-light: var(--cg-accent-soft); --cg-brand-tint: var(--cg-blue-50); /* Surfaces */ --cg-bg: var(--cg-paper-50); --cg-bg-elevated: #ffffff; --cg-bg-subtle: var(--cg-paper-100); /* Text */ --cg-text-primary: var(--cg-ink-950); --cg-text-secondary: var(--cg-ink-600); --cg-text-disabled: var(--cg-ink-400); /* Borders */ --cg-border: var(--cg-paper-200); --cg-border-subtle: rgba(10, 16, 32, 0.06); --cg-border-strong: var(--cg-paper-300); /* Ink surface – always dark, in both themes (the closing band) */ --cg-ink-bg: var(--cg-navy-950); --cg-ink-bg-raised: var(--cg-navy-800); --cg-ink-text: #eef1f7; --cg-ink-text-muted: #a3adc4; --cg-ink-border: rgba(255, 255, 255, 0.10); --cg-ink-glow: rgba(58, 92, 240, 0.38); --cg-ink-accent: var(--cg-cobalt-500); --cg-ink-accent-hover: var(--cg-cobalt-400); --cg-ink-focus-ring: var(--cg-cobalt-300); /* Type – the display face is for headlines only, the text face for everything else. Scripts without a display cut fall back per language in the typography section below. */ --cg-font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --cg-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --cg-display-weight: 400; --cg-display-tracking: -0.012em; /* Header, once the page has scrolled */ --cg-header-bg-solid: rgba(250, 248, 244, 0.82); /* Shadows */ --cg-shadow-sm: 0 1px 2px rgba(10, 16, 32, 0.05), 0 1px 1px rgba(10, 16, 32, 0.03); --cg-shadow-md: 0 6px 20px rgba(10, 16, 32, 0.07), 0 2px 6px rgba(10, 16, 32, 0.04); --cg-shadow-lg: 0 30px 70px -20px rgba(10, 16, 32, 0.22), 0 10px 24px -8px rgba(10, 16, 32, 0.08); /* Dark surface tokens (always dark, theme-independent) */ --cg-dark-bg: var(--cg-navy-900); --cg-dark-bg-card: var(--cg-navy-800); --cg-dark-text: var(--cg-slate-100); --cg-dark-text-muted: var(--cg-slate-400); --cg-dark-border: rgba(255, 255, 255, 0.08); /* Legacy compat (card helpers still reference these) */ --cg-card-border-light: var(--cg-border); --cg-card-border-dark: var(--cg-dark-border); --cg-card-shadow-light: var(--cg-shadow-md); --cg-card-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.30); /* ── Data visualisation palette ─────────────────────────────────────── */ /* Eight perceptually distinct colours for the application's charts; --cg-chart-1 is the one series colour. */ --cg-chart-1: #2563eb; /* Brand blue */ --cg-chart-2: #7c3aed; /* Violet */ --cg-chart-3: #059669; /* Emerald */ --cg-chart-4: #d97706; /* Amber */ --cg-chart-5: #e11d48; /* Rose */ --cg-chart-6: #0891b2; /* Cyan */ --cg-chart-7: #ea580c; /* Orange */ --cg-chart-8: #475569; /* Slate */ /* ── Plan badge tokens ───────────────────────────────────────────────── */ --cg-plan-starter-bg: #0891b2; /* Cyan-600 */ --cg-plan-starter-text: #ffffff; --cg-plan-growth-bg: #059669; /* Emerald-600 */ --cg-plan-growth-text: #ffffff; --cg-plan-pro-bg: #2563eb; /* Blue-600 */ --cg-plan-pro-text: #ffffff; --cg-plan-enterprise-bg: #d97706; /* Amber-600 */ --cg-plan-enterprise-text: #ffffff; /* ── Application design system ──────────────────────────────────────────── What the signed-in application needs on top of the shared tokens. Bootstrap paints through "r, g, b" triplets, which cannot be derived from a colour in CSS, so each triplet sits here beside the token it repeats and MUST change with it. Soft tints are not tokens: costguard-app-system.css mixes them from these colours, so they follow a brand change by themselves. --cg-on-status is the text a solid status fill carries. The status colours are text colours first: dark in the light theme, where a fill takes white; light in the dark theme, where a fill takes ink. Computed contrast, fill against --cg-on-status: light 6.1 / 6.3 / 6.5 / 7.3 (operational, degraded, outage, unknown); dark 11.1 / 11.8 / 8.3 / 9.0. As text, every status colour clears 4.5:1 on all three surfaces and on its own 12% tint over each. --cg-success and --cg-warning do NOT clear 4.5:1 on their own tint in the light theme (4.3 and 4.0), so money saved and risk are text on a plain surface, never text on a tint of themselves, and --cg-warning is not used as text on --cg-bg-subtle (4.4). */ --cg-accent-text-rgb: 36, 71, 216; --cg-text-primary-rgb: 10, 16, 32; --cg-text-secondary-rgb: 86, 96, 121; --cg-bg-rgb: 250, 248, 244; --cg-bg-elevated-rgb: 255, 255, 255; --cg-bg-subtle-rgb: 242, 239, 232; --cg-status-operational-rgb: 21, 112, 63; --cg-status-degraded-rgb: 133, 86, 0; --cg-status-outage-rgb: 179, 38, 30; --cg-status-unknown-rgb: 77, 86, 107; --cg-on-status: #ffffff; --cg-scrim: rgba(10, 16, 32, 0.45); } /* ── Dark theme ─────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { /* Lighter, more vibrant chart colours on dark surfaces. */ --cg-chart-1: #60a5fa; /* Blue-400 */ --cg-chart-2: #a78bfa; /* Violet-400 */ --cg-chart-3: #34d399; /* Emerald-400 */ --cg-chart-4: #fbbf24; /* Amber-400 */ --cg-chart-5: #fb7185; /* Rose-400 */ --cg-chart-6: #22d3ee; /* Cyan-400 */ --cg-chart-7: #fb923c; /* Orange-400 */ --cg-chart-8: #94a3b8; /* Slate-400 */ --cg-plan-starter-bg: #0e7490; /* Cyan-700 — readable on dark */ --cg-plan-growth-bg: #047857; /* Emerald-700 */ --cg-plan-pro-bg: #1d4ed8; /* Blue-700 */ --cg-plan-enterprise-bg: #b45309; /* Amber-700 */ /* Flip semantic aliases for dark surfaces. --cg-brand and its siblings are aliases of the accent, so they follow without being restated. */ --cg-accent: var(--cg-cobalt-500); --cg-accent-rgb: 58, 92, 240; --cg-accent-hover: var(--cg-cobalt-400); --cg-accent-text: var(--cg-cobalt-300); --cg-accent-soft: rgba(96, 124, 255, 0.14); --cg-accent-glow: rgba(58, 92, 240, 0.30); --cg-focus-ring: var(--cg-cobalt-300); --cg-brand-tint: rgba(96, 124, 255, 0.08); --cg-bg: var(--cg-navy-900); --cg-bg-elevated: var(--cg-navy-800); --cg-bg-subtle: var(--cg-navy-950); --cg-text-primary: #eef1f7; --cg-text-secondary: #a3adc4; --cg-text-disabled: #6b7590; --cg-border: rgba(255, 255, 255, 0.09); --cg-border-subtle: rgba(255, 255, 255, 0.05); --cg-border-strong: rgba(255, 255, 255, 0.18); --cg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --cg-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.40); --cg-shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, 0.70), 0 10px 24px -8px rgba(0, 0, 0, 0.40); --cg-success: #3fd68f; /* Money saved, lifted for a navy surface */ --cg-warning: #fbbf24; /* Risk – amber-400 */ --cg-error: #f87171; /* Red-400 */ /* Service status, lifted for a navy surface – same contrast rule as above. */ --cg-status-operational: #6ddaa8; --cg-status-degraded: #f2c661; --cg-status-outage: #ff8a80; --cg-status-maintenance: #b9a5ff; --cg-status-unknown: #aab3c7; --cg-header-bg-solid: rgba(8, 13, 26, 0.78); /* Application design system: the dark values of the triplets, the text a solid status fill carries, and the scrim. See the note in :root above. */ --cg-accent-text-rgb: 147, 169, 255; --cg-text-primary-rgb: 238, 241, 247; --cg-text-secondary-rgb: 163, 173, 196; --cg-bg-rgb: 8, 13, 26; --cg-bg-elevated-rgb: 15, 23, 41; --cg-bg-subtle-rgb: 5, 9, 20; --cg-status-operational-rgb: 109, 218, 168; --cg-status-degraded-rgb: 242, 198, 97; --cg-status-outage-rgb: 255, 138, 128; --cg-status-unknown-rgb: 170, 179, 199; --cg-on-status: #0a1020; --cg-scrim: rgba(0, 0, 0, 0.60); } /* ── Forced colours (a Windows contrast theme) ─────────────────────────── The system drops every author surface and paints its own palette. A mark that carries meaning by its fill alone, such as a share bar, keeps it by taking the system's text colour, named here so that no page stylesheet names a colour of its own. Read only inside @media (forced-colors: active). */ @media (forced-colors: active) { :root { --cg-forced-text: CanvasText; } }