:root {
    --container-width: 1392px;

    /*main colors*/
    /*--color-white: #fff;
    --color-dark:#0F152B;
    --color-dark-2: #0F152B;
    --color-accent: #0077DB;
    --color-accent-2: #2C3352;
    --color-button-bg:#ff0;*/

    /*header, footer, body background*/
    --color-bg-header-footer: var(--color-dark-2);
    --color-bg-body: var(--color-dark);

    /*texts colors*/
    --color-nav-menu-text: var(--color-accent);
    --color-p: var(--color-white);
    /* --color-button-text is controlled by Theme Settings → Colors (ACF → :root inline style in functions.php).
       Do NOT hardcode it here: this file loads after the inline style and would override the admin value. */
    --color-font-shadow: var(--color-dark);
    --font-shadow: drop-shadow(0 1px 0 var(--color-dark));

    /*text gradients settings*/
    --gradient-headers: linear-gradient(to bottom, var(--color-white) 50%, var(--color-accent) 100%);
    --gradient-headers-title-fixed: linear-gradient(to bottom, var(--color-white) 50%, var(--color-accent) 100%);
    --green-gradient: linear-gradient(to bottom, #04422a 20%, #51cf58 100%);

    /*buttons and elements*/
    --color-elements: var(--color-accent);
    --color-button-anchor-text: var(--color-white);
    --color-button-anchor-bg: var(--color-dark);
    --color-anchor-menu-primary: var(--color-dark);
    --color-anchor-menu-secondary: var(--color-accent);

    /*banners*/
    --color-banner-bg: var(--color-accent-2);
    --color-banner-text: var(--color-white);

    /*font settings*/
    --header-height: 8rem;
    --font-base-letter-spacing: -.01em;
    --font-secondary-letter-spacing: .01em;

    /*font-size scale*/
    --fs-xs: 10px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 22px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;
    --fs-4xl: 40px;
    --fs-5xl: 48px;
    --fs-6xl: 64px;

    /*line-height scale*/
    --lh-tight: 1;
    --lh-snug: 1.2;
    --lh-normal: 1.35;
    --lh-relaxed: 1.6;

    --clip-for-corners: polygon(
            calc(0% + 8px) 0%,
            calc(100% - 8px) 0%,
            100% calc(0% + 8px),
            100% calc(100% - 8px),
            calc(100% - 8px) 100%,
            calc(0% + 8px) 100%,
            0% calc(100% - 8px),
            0% calc(0% + 8px)
    );
}
