/* ========================================================================== 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. ========================================================================== */ /* -------------------------------------------------------------------------- Text and display faces, served from this site (2026-10-24, page speed). Instrument Sans and Instrument Serif (every culture), Vazirmatn (Persian) and Cairo (Arabic), SIL Open Font License 1.1 (each folder in wwwroot/fonts/ holds its licence), the same files and subsets Google Fonts served: one request to this origin instead of two more origins (fonts.googleapis.com, fonts.gstatic.com) before the first paint. A browser downloads a face only when the page shows characters in its unicode-range, so the Persian and Arabic files cost nothing on the other pages. Chinese uses the system Chinese face the font stacks name (see App.razor); nothing comes from Google Fonts. -------------------------------------------------------------------------- */ /* Instrument Sans 400 normal, latin-ext */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument/instrument-sans-v4-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Instrument Sans 400 normal, latin */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument/instrument-sans-v4-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Sans 500 normal, latin-ext */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/instrument/instrument-sans-v4-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Instrument Sans 500 normal, latin */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/instrument/instrument-sans-v4-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Sans 600 normal, latin-ext */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/instrument/instrument-sans-v4-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Instrument Sans 600 normal, latin */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/instrument/instrument-sans-v4-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Sans 700 normal, latin-ext */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/instrument/instrument-sans-v4-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Instrument Sans 700 normal, latin */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/instrument/instrument-sans-v4-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Serif 400 italic, latin-ext */ @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument/instrument-serif-v5-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Instrument Serif 400 italic, latin */ @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument/instrument-serif-v5-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Serif 400 normal, latin-ext */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument/instrument-serif-v5-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Instrument Serif 400 normal, latin */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument/instrument-serif-v5-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Vazirmatn 100-900, arabic */ @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/vazirmatn/vazirmatn-v16-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } /* Vazirmatn 100-900, latin-ext */ @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/vazirmatn/vazirmatn-v16-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Vazirmatn 100-900, latin */ @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/vazirmatn/vazirmatn-v16-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cairo 200-900, arabic */ @font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/cairo/cairo-v31-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } /* Cairo 200-900, latin-ext */ @font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/cairo/cairo-v31-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cairo 200-900, latin */ @font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/cairo/cairo-v31-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- 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; } }