/******
Defaultní používaná media queries, stejná jako u core-* souborů, min-width:
480px, 640px, 840px, 960px, 1280px, 1440px, 1600px, 1921px
******/

/* VARIABLES.CSS - CSS PROMĚNNÉ */

/* width variables */

:root {
    --width-page: 116.25rem; /* nastavuje max. pevnou šířku stránek */
    --width-middle: 92.5rem; /* nastavuje středně široký blok */
    --width-tight: 44.375rem; /* nastavuje úzky blok */
}

/* width variables end */

/* gap variables */

:root {
    --gap-page: 1rem; /* nastavuje spacing pro levý a pravý padding stránek */
    --gap-block: 7.5rem; /* nastavuje spacing základních bloků */
    --gap-element: 3.75rem; /* nastavuje spacing menších elementů */
    --gap-element-stable: 3.75rem;
    --gap-element-middle: 0.938rem;
    --gap-element-small: 0.938rem; /* nastavuje spacing menších elementů */
    --gap-text: 0.938rem; /* nastavuje spacing textových elementů */
    --gap-clouds: 6.625rem; /* pouze pro použití s bloky, které překrývají mraky */
    --gap-body-top: 5rem;
}

@media (min-width: 960px) {
    
    :root {
        --gap-page: 2.375rem;
        --gap-block: 11.25rem;
        --gap-element: 5.625rem;
        --gap-element-middle: 2.375rem;
        --gap-element-small: 1.5rem;
        --gap-text: 1.5rem;
        --gap-clouds: 8.75rem;
        --gap-body-top: 7.25rem;
    }
}

@media (min-width: 1280px) {
    
    :root {
        --gap-page: 3.75rem;
        --gap-block: 15rem;
        --gap-element: 7.5rem;
        --gap-element-middle: 3.75rem;
        --gap-element-small: 1.875rem;
        --gap-text: 1.875rem;
        --gap-clouds: 13.125rem;
    }
}

@media (min-width: 1921px) {
    
    :root {
        --gap-clouds: 10.9vw;
    }
}

/* gap variables end */

/* font variables */

:root {
    --font-family-primary: 'Open Sans', sans-serif; /* nastavuje výchozí rodinu písma */
    --font-family-secondary: Panton, 'Lucida Sans', 'Lucida Grande', sans-serif;
    --font-size-primary: 0.875rem; /* nastavuje výchozí velikost písma pro nejběžnější texty */
    --font-size-h1: 1.75rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --font-size-h4: 1rem;
    --font-size-h5: 0.75rem;
    --font-size-hero: 2rem;
    --font-size-subtitle-1: 1.5rem;
    --font-size-subtitle-2: 1.25rem;
    --font-size-subtitle-3: 1rem;
    --font-size-text-perex: 1.25rem;
    --font-size-caption: 0.75rem;
    --line-height-primary: 1.7; /* nastavuje výchozí line-height textovým elementům */
    --line-height-secondary: 1.15;
    --line-height-tertiary: 1.5;
}

@media (min-width: 960px) {
    
    :root {
        --font-size-primary: 1rem;
        --font-size-h1: 3.125rem;
        --font-size-h2: 2.25rem;
        --font-size-h3: 1.75rem;
        --font-size-h4: 1.25rem;
        --font-size-h5: 1rem;
        --font-size-hero: 3.188rem;
        --font-size-subtitle-1: 2.25rem;
        --font-size-subtitle-2: 1.75rem;
        --font-size-subtitle-3: 1.25rem;
        --font-size-text-perex: 1.75rem;
        --font-size-caption: 0.813rem;
    }
}

@media (min-width: 1280px) {
    
    :root {
        --font-size-primary: 1.125rem;
        --font-size-h1: 4.5rem;
        --font-size-h2: 3rem;
        --font-size-h3: 2.25rem;
        --font-size-h4: 1.5rem;
        --font-size-h5: 1.125rem;
        --font-size-hero: 4.375rem;
        --font-size-subtitle-1: 3rem;
        --font-size-subtitle-2: 2.25rem;
        --font-size-subtitle-3: 1.5rem;
        --font-size-text-perex: 2.25rem;
        --font-size-caption: 0.875rem;
    }
}

@media (min-width: 1440px) {
    
    :root {
        --font-size-hero: 5.563rem;
    }
}

@media (min-width: 1600px) {
    
    :root {
        --font-size-hero: 6.75rem;
    }
}

/* font variables end */

/* color variables */

:root {
    --color-primary: #00303F; /* nastavuje základní barvu, např. na výchozí texty */
    --white: #fff;
    --black: #000;
    --grey: #333;
    --mandy: #D04F55;
    --bondi-blue: #0290BF;
    --bondi-blue-2: #008BBF;
    --turquoise-blue: #33BBCF;
    --periwinkle-blue: #BDD8E5;
    --pattens-blue: #E3EFF6;
    --teal-blue: #006789;
    --sandy-brown: #F8955E;
    --harvest-gold: #E9B865;
    --border-color-primary: var(--periwinkle-blue);
    --border-color-secondary: var(--pattens-blue);
}

/* color variables end */

/* backgrounds */

:root {
    --background-type-1: linear-gradient(360deg, var(--color-primary), #0090BF);
    --background-type-2: linear-gradient(328deg, var(--black), var(--grey));
    --background-type-3: linear-gradient(328deg, var(--bondi-blue), var(--turquoise-blue));
}

/* backgrounds end */

/* other variables */

:root {
    --border-primary: unset;
    --border-secondary: 1px dotted var(--white);
    --border-radius-primary: 0.313rem;
    --border-radius-secondary: 0.938rem;
    --border-radius-tertiary: 0.313rem;
}

@media (min-width: 960px) {
    
    :root {
        --border-secondary: 2px dotted var(--white);
        --border-radius-secondary: 1.5rem;
    }
}

@media (min-width: 1280px) {
    
    :root {
        --border-radius-secondary: 1.875rem;
    }
}

/* other variables end */