:root {

    /* ===== Colors ===== */
    --white: #ffffff;
    --black: #000000;

    /* Brand — from Figma variables */
    --primary-blue: #0a5176;
    /* Figma var: "Blue" */
    --action-red: #c3443f;
    /* Figma var: "Action color" */
    --dark-gray: #3a404d;
    /* Figma var: "Dark gray" */
    --success-green: #10b981;
    /* affirmative list icons — not a Figma variable, raw hex in the design */

    /* Backgrounds */
    --hero-dark: #032638;
    --footer-dark: #05223a;
    --deep-teal: #073e5b;
    --mid-blue: #196389;
    --panel-grey: #f5f6f8;
    --logo-card-bg: #f6f6f6;
    --section-tint: #f0f4f6;
    --blue-tint: rgba(10, 81, 118, 0.06);
    --tag-dark-bg: rgba(255, 255, 255, 0.1);
    --badge-tint: rgba(195, 68, 63, 0.08);

    /* Text */
    --heading-text: #0c1d2e;
    --body-text: #3a404d;
    --muted-slate: #506a7c;
    --hero-body: #8fa3b5;
    --text-on-dark: rgba(255, 255, 255, 0.7);
    --footer-text: rgba(255, 255, 255, 0.73);

    /* Cards & surfaces */
    --stat-card-bg: rgba(10, 81, 118, 0.8);

    /* Decorative grid on the dark hero */
    --grid-line: rgba(255, 255, 255, 0.08);
    --grid-dot: rgba(255, 255, 255, 0.1);

    /* Lines & borders */
    --border-light: #e1e6eb;
    --border-hairline: rgba(255, 255, 255, 0.1);
    --connector-grey: #b8b8b8;
    --divider-navy: #1e3b50;
    --divider-soft: rgba(0, 0, 0, 0.1);
    --border-frame: #dee8ed;
    --border-outline-btn: #506a7c;
    --border-divider: rgba(255, 255, 255, 0.2);

    /* ===== Typography ===== */
    --font-heading: "Inter", sans-serif;
    --font-body: "Inter", sans-serif;
}