:root {
    --brand-primary: #007179;
    --brand-primary-rgb: 0, 113, 121;
    /* Text on a brand fill. Runtime branding sets the auto value (score-band ink: #FFFFFF or #222222). */
    --brand-primary-foreground: var(--brand-primary-foreground-auto, #ffffff);
    /* Brand drawn on a light surface. The brand when it reads on white, otherwise #222222. */
    --brand-primary-on-light: var(--brand-primary-on-light-auto, var(--brand-primary));
    /* Washes for subtle highlights, hovers and selected states. Fixed alphas of the brand
       rgb triplet — not color-mix(), which IronPDF 2023.6.9 may not paint.
       Legacy-colour campaigns pin these to the previous default-teal literals. */
    --brand-tint-subtle: rgba(var(--brand-primary-rgb), 0.03);
    --brand-tint-soft: rgba(var(--brand-primary-rgb), 0.04);
    --brand-tint-muted: rgba(var(--brand-primary-rgb), 0.06);
    --brand-tint-hover: rgba(var(--brand-primary-rgb), 0.10);
    --brand-tint-selected: rgba(var(--brand-primary-rgb), 0.12);
    --brand-tint-strong: rgba(var(--brand-primary-rgb), 0.16);
    --brand-tint-line: rgba(var(--brand-primary-rgb), 0.18);
    --brand-tint-line-strong: rgba(var(--brand-primary-rgb), 0.35);
    --brand-secondary: #73929B;
    --brand-secondary-rgb: 115, 146, 155;
    --brand-accent: #B2D235;

    /* Chart series roles: current campaign vs comparison (previous campaign / benchmark). Campaign files may remap. */
    --chart-current: var(--brand-primary);
    --chart-comparison: var(--brand-accent);

    /* Default grey family: pure grey (shadcn "neutral"). Surfaces and borders map onto it. */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;

    --surface-page: var(--neutral-50);
    --surface-panel: #ffffff;
    --surface-muted: var(--neutral-50);
    --surface-subtle: var(--neutral-100);
    --surface-inverse: var(--neutral-900);

    /* One text colour; secondary and muted derive from it (muted stays at least 4.5:1 on --surface-muted). */
    --text-primary: #000000;
    --text-primary-rgb: 0, 0, 0;
    --text-secondary: rgba(var(--text-primary-rgb), 0.8);
    --text-muted: rgba(var(--text-primary-rgb), 0.6);
    /* Text on --surface-inverse. Runtime branding sets the auto value from that surface (same ink rule). */
    --text-inverse: var(--text-inverse-auto, #ffffff);
    --link-color: var(--brand-primary);
    --link-hover-color: var(--brand-secondary);

    --border-subtle: var(--neutral-200);
    --border-strong: var(--neutral-300);
    --focus-ring: rgba(var(--brand-primary-rgb), 0.28);
    --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
    --shadow-raised: 0 8px 20px rgba(16, 24, 40, 0.10);

    --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --primary-font-family: var(--font);

    --button-text-transform: uppercase;
    --button-font-weight: 600;

    --button-primary-bg: var(--brand-primary);
    --button-primary-text: var(--brand-primary-foreground);
    --button-primary-border: var(--button-primary-bg);
    --button-primary-hover-bg: rgba(var(--brand-primary-rgb), 0.8);
    --button-primary-hover-text: var(--button-primary-text);
    --button-primary-hover-border: var(--button-primary-hover-bg);

    /* Brand outline (btn-outline-primary) */
    --button-outline-bg: transparent;
    --button-outline-text: var(--brand-primary-on-light);
    --button-outline-border: var(--brand-primary-on-light);
    --button-outline-hover-bg: var(--button-primary-bg);
    --button-outline-hover-text: var(--button-primary-text);
    --button-outline-hover-border: var(--button-primary-border);
    /* Selected segment. The brand fill unless that fill disappears on white, then #222222. */
    --button-outline-checked-bg: var(--button-outline-checked-bg-auto, var(--brand-primary));
    --button-outline-checked-text: var(--button-outline-checked-text-auto, var(--brand-primary-foreground));
    --button-outline-checked-border: var(--button-outline-checked-bg);
    /* Unselected segmented toggle (.btn-check) hover — lighter than the checked fill */
    --button-outline-toggle-hover-bg: rgba(var(--brand-primary-rgb), 0.08);

    /* Neutral filled (btn-secondary) */
    --button-neutral-bg: var(--surface-muted);
    --button-neutral-text: var(--text-secondary);
    --button-neutral-border: var(--border-subtle);
    --button-neutral-hover-bg: var(--surface-subtle);
    --button-neutral-hover-text: var(--text-primary);
    --button-neutral-hover-border: var(--border-strong);

    /* Neutral outline (btn-outline-secondary). Hover is muted for white surfaces;
       muted/off-white containers remap --button-neutral-outline-hover-bg to --surface-panel. */
    --button-neutral-outline-bg: transparent;
    --button-neutral-outline-text: var(--text-secondary);
    --button-neutral-outline-border: var(--border-subtle);
    --button-neutral-outline-hover-bg: var(--surface-muted);
    --button-neutral-outline-hover-text: var(--text-primary);
    --button-neutral-outline-hover-border: var(--border-strong);

    --button-ghost-bg: transparent;
    --button-ghost-text: var(--text-secondary);
    --button-ghost-border: var(--border-subtle);
    --button-ghost-hover-bg: var(--surface-muted);
    --button-ghost-hover-text: var(--text-primary);
    --button-ghost-hover-border: var(--border-strong);

    --nav-bg: var(--surface-inverse);
    --nav-text: var(--text-inverse);
    --nav-muted: rgba(255, 255, 255, 0.72);
    --nav-active-bg: var(--brand-primary);
    --nav-active-text: var(--brand-primary-foreground);

    --input-bg: var(--surface-panel);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-muted);
    --input-border: var(--border-subtle);
    --input-focus-border: var(--brand-primary);
    --input-focus-ring: var(--focus-ring);

    --score-red: #B90000;
    --score-orange: #FF8C00;
    --score-amber: #FFC000;
    --score-light-green: #92D051;
    --score-dark-green: #6E9600;

    --score-legend-red: var(--score-red);
    --score-legend-orange: var(--score-orange);
    --score-legend-amber: var(--score-amber);
    --score-legend-light-green: var(--score-light-green);
    --score-legend-dark-green: var(--score-dark-green);

    /* Text on score bands. Runtime branding injects WCAG-contrasting *-ink-auto values;
       campaign-theme.css may set --score-legend-*-ink on :root to override. */
    --score-legend-red-ink: var(--score-legend-red-ink-auto, #FFFFFF);
    --score-legend-orange-ink: var(--score-legend-orange-ink-auto, #222222);
    --score-legend-amber-ink: var(--score-legend-amber-ink-auto, #222222);
    --score-legend-light-green-ink: var(--score-legend-light-green-ink-auto, #222222);
    --score-legend-dark-green-ink: var(--score-legend-dark-green-ink-auto, #FFFFFF);
    /* Compatibility aliases for legacy surfaces during migration. */
    --primary-color: var(--brand-primary);
    --secondary-color: var(--brand-secondary);
    --system-accent: var(--brand-accent);
    --text-color: var(--text-primary);
    --light-grey: var(--surface-muted);
    --light-gray: var(--surface-muted);
    --grey: var(--border-subtle);
    --border-color: var(--border-subtle);
    --surface-0: var(--surface-page);
    --surface-1: var(--surface-panel);
    --surface-2: var(--surface-muted);
    --border: var(--border-subtle);
    --shadow-1: var(--shadow-soft);
    --brand-gradient-end: var(--surface-inverse);
}