/* ======================================== VARIABLES =================================== */
:root {
    --black: #000000;
    --white: #FFFFFF;
    --cyan: #22C3E6;
    --orange: #FF8900;
    --orange-light: #FF890030;
    --red: #FF0000;
    --red-light: #FF000030;
    --green: #0edc0e;
    --green-light: #00FF0030;
    --blue: #0000FF;
    --blue-light: #0000FF30;

    --grey-1: #CECDCE;
    --grey-2: #999999;
    --grey-3: #F0F0F0;

    --background: #E3EAEF;

    --shadow-black: 0 4px 6px rgba(0, 0, 0, 0.3);

    --primary-gradient: linear-gradient(to right, var(--black) 20%, var(--orange));

    --black-icon: invert(0%) sepia(50%) saturate(1171%) hue-rotate(48deg) brightness(93%) contrast(105%);
    --white-icon: invert(99%) sepia(57%) saturate(0%) hue-rotate(221deg) brightness(111%) contrast(100%);
    --cyan-icon: invert(78%) sepia(25%) saturate(6276%) hue-rotate(149deg) brightness(97%) contrast(86%);
    --orange-icon: invert(54%) sepia(91%) saturate(1906%) hue-rotate(360deg) brightness(102%) contrast(106%);

    --grey-icon: invert(68%) sepia(19%) saturate(0%) hue-rotate(165deg) brightness(82%) contrast(84%);
    --red-icon: invert(13%) sepia(99%) saturate(6635%) hue-rotate(360deg) brightness(97%) contrast(111%);
    --green-icon: invert(74%) sepia(69%) saturate(5528%) hue-rotate(82deg) brightness(110%) contrast(104%);
    --blue-icon: invert(8%) sepia(100%) saturate(6984%) hue-rotate(248deg) brightness(105%) contrast(144%);

    --primary-font: "Open Sans", sans-serif;
    --secondary-font: "Atkinson Hyperlegible Mono", sans-serif;
    --tertiary-font: "Iceland", sans-serif;

    --title-text: 24px;
    --subtitle-text: 18px;
    --big-text: 16px;
    --normal-text: 14px;
    --small-text: 12px;

    --padding-general: 24px;
    --margin-general: 24px;
    --gap-general: 24px;
    --radius-general: 15px;

    --padding-btn: 3px 6px;
    --gap-btn: 4px;
    --radius-btn: 5px;

    --icon-size: 18px;
    --header-height: 60px;
    --single-border: 2px;

    --transition: all 250ms ease-in-out;
    --transition-btn: all 100ms linear;
}

[data-theme="dark"] {
    --black: #FFFFFF;
    --white: #303030;

    --black-icon: invert(97%) sepia(97%) saturate(12%) hue-rotate(197deg) brightness(104%) contrast(104%);
    --background: #606060;
    --shadow-black: 0 4px 6px rgba(255, 255, 255, 0.3);
}

@media only screen and (max-width: 1200px) {
    :root {
        --padding-general: 18px;
        --margin-general: 18px;
        --gap-general: 18px;
        --radius-general: 12px;
    }
}

@media only screen and (max-width: 576px) {
    :root {
        --padding-general: 15px;
        --margin-general: 15px;
        --gap-general: 15px;
        --radius-general: 10px;
    }
}