:root {
    --brand-primary: #007179;
    --brand-primary-rgb: 0, 113, 121;
    --brand-secondary: #73929B;
    --brand-secondary-rgb: 115, 146, 155;
    --brand-accent: #B2D235;

    --surface-page: #f7f8fa;
    --surface-panel: #ffffff;
    --surface-muted: #f8fafc;
    --surface-subtle: #f4f6f8;
    --surface-inverse: #1f3442;

    --text-primary: #263746;
    --text-secondary: #465967;
    --text-muted: #6c757d;
    --text-inverse: #ffffff;
    --link-color: var(--brand-primary);
    --link-hover-color: var(--brand-secondary);

    --border-subtle: #dee2e6;
    --border-strong: rgba(16, 24, 40, 0.18);
    --focus-ring: rgba(0, 113, 121, 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-primary-bg: var(--brand-primary);
    --button-primary-text: var(--text-inverse);
    --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);
    --button-outline-border: var(--brand-primary);
    --button-outline-hover-bg: var(--button-primary-bg);
    --button-outline-hover-text: var(--button-primary-text);
    --button-outline-hover-border: var(--button-primary-border);

    /* 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(--text-inverse);

    --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);

    /* 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);
    --text-strong: 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);
}