:root {
    /* Nickel Design palette (the staging site's Elementor global colours) */
    --nd-blue: #009FE3;          /* primary */
    --nd-blue-dark: #0086C0;
    --nd-navy: #111122;          /* secondary */
    --nd-grey: #606060;          /* text */
    --nd-ink: #1D1D1B;           /* accent */
    --nd-body: #333333;          /* theme body text */
    --nd-grey-light: #F8F9F9;
    --nd-white: #FFFFFF;

    --color-primary: var(--nd-blue);
    --color-primary-hover: var(--nd-blue-dark);
    --color-secondary: var(--nd-navy);
    --color-success: #1E8E3E;
    --color-warning: #B26A00;
    --color-error: #C62828;

    --bg-primary: var(--nd-white);
    --bg-secondary: var(--nd-grey-light);
    --bg-dark: var(--nd-navy);

    --text-primary: var(--nd-navy);
    --text-body: var(--nd-body);
    --text-secondary: var(--nd-grey);
    --text-muted: #8A8F94;
    --text-inverse: var(--nd-white);

    --border-color: #DDE2E5;
    --border-radius: 2px;

    /* Spacing (forms, alerts, error pages) */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-4xl: 6rem;

    /* Elementor kit typography: body 20px; "primary" 48px, "secondary"
       24px/1.2, "text" 18px. Tablet and mobile values are set below. */
    --font-sans: "Assistant", sans-serif;
    --font-accent: "Roboto", sans-serif;
    --fs-body: 20px;
    --fs-primary: 48px;
    --fs-secondary: 24px;
    --fs-text: 18px;
    --lh-text: normal;
    --fs-h1: var(--fs-primary);
    --fs-h2: 36px;
    --fs-h3: 28px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-h6: 18px;

    /* Content width of boxed containers (Elementor container max width). */
    --container-max: 1140px;
}

@media (max-width: 1024px) {
    :root {
        --fs-body: 16px;
        --fs-primary: 36px;
        --fs-secondary: 20px;
        --fs-text: 16px;
        --fs-h2: 28px;
        --fs-h3: 24px;
        --fs-h4: 20px;
        --fs-h5: 18px;
        --fs-h6: 16px;
        --container-max: 1024px;
    }
}

@media (max-width: 767px) {
    :root {
        --fs-primary: 24px;
        --fs-secondary: 16px;
        --fs-text: 14px;
        --lh-text: 1.2em;
        --fs-h2: 22px;
        --fs-h3: 18px;
        --fs-h4: 16px;
        --fs-h5: 14px;
        --fs-h6: 14px;
        --container-max: 767px;
    }
}