/* ---------- Global variables ---------- */

:root {
    /* spacers */
    --global-spacer: 4px;

    /* colors */
    --header-color: #122538;

    --global-green: #00a046;
    --global-green-hsl: 146, 100%, 31%;
    --global-green-rgb: 0, 160, 70;

    --global-green-80: #44b26f;
    --global-green-60: #73c592;
    --global-green-40: #a1d8b6;
    --global-green-20: #d0ecdb;
    --global-green-10: #e5f5ec;
    --global-green-5: #f4faf6;

    --global-black: #221f1f;
    --global-black-hsl: 0, 5%, 13%;
    --global-black-rgb: 34, 31, 31;

    --global-black-80: #4d4b4b;
    --global-black-60: #797878;
    --global-black-40: #a6a5a5;
    --global-black-20: #d2d2d2;
    --global-black-10: #e9e9e9;
    --global-black-5: #f5f5f5;

    --global-red: #f84147;
    --global-red-hsl: 358, 93%, 61%;
    --global-red-rgb: 248, 65, 71;

    --global-orange: #ff5c00;
    --global-orange-hsl: 22, 100%, 50%;
    --global-orange-rgb: 255, 92, 0;

    --global-yellow: #ffa900;
    --global-yellow-hsl: 40, 100%, 50%;
    --global-yellow-rgb: 255, 169, 0;

    --global-lemon: #fed44b;
    --global-lemon-hsl: 46, 99%, 65%;
    --global-lemon-rgb: 254, 212, 75;

    --global-light-blue: #31a3db;
    --global-light-blue-hsl: 200, 70%, 53%;
    --global-light-blue-rgb: 49, 163, 219;

    --global-blue: #3e77aa;
    --global-blue-hsl: 208, 47%, 45%;
    --global-blue-rgb: 62, 119, 170;

    --global-purple: #712bd4;
    --global-purple-hsl: 265, 66%, 50%;
    --global-purple-rgb: 113, 43, 212;

    --global-pink: #d83798;
    --global-pink-hsl: 324, 67%, 53%;
    --global-pink-rgb: 216, 55, 152;

    --premiun-color: #471a7b;
    --loyalty-yellow: #f2e312;

    --link-color: #3e77aa;
    --link-hover-color: #ff7878;
    --main-icon-color: #ffa800;
    --price-tag-color: #fef2b8;

    /* fonts */
    --main-font-family: BlinkMacSystemFont, -apple-system, Arial, "Segoe UI", Roboto, Helvetica, sans-serif;
    --brand-font-family: 'Rozetka', BlinkMacSystemFont, -apple-system, Arial, "Segoe UI", Roboto, Helvetica, sans-serif;
    --brand-font-family-bold: 'Rozetka Bold', BlinkMacSystemFont, -apple-system, Arial, "Segoe UI", Roboto, Helvetica, sans-serif;
    --common-font-size: 14px;
    --h1-font-size: 24px;
    --h2-font-size: 20px;
    --h3-font-size: 18px;

    --menu-font-size: 16px;
    --menu-item-color: rgb(255,255,255);

    /* header */
    --height-min-header: 50px;
    --max-header-height: 70px;

    /* footer */
    --height-min-footer: calc(var(--height-min-header) * 2);
}