@font-face {
    font-family: 'Outfit';
    src: url('../../webfonts/outfit-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('../../webfonts/outfit-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root{
    --color-primary:                hsl(357, 92%, 48%);
    --color-primary-light:          hsl(357, 92%, 58%);
    --color-primary-dark:           hsl(357, 92%, 38%);

    --color-secondary:              hsl(324, 75%, 56%);
    --color-secondary-light:        hsl(324, 75%, 66%);
    --color-secondary-dark:         hsl(324, 75%, 46%);

    --color-background-theme-dark:  hsl(0, 0%, 0%);
    --color-background-theme-light: hsl(0, 0%, 9%);
    --color-background-theme-body:  hsl(0, 0%, 5%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(0, 0%, 60%);
    --color-black:                  hsl(0, 0%, 0%);

    --font-family:                  'Outfit', sans-serif;
    --font-family-title:            'Outfit', sans-serif;
    --font-letter-spacing:          -0.01em;
    --font-letter-spacing-title:    -0.02em;

    --font-weight-light:            400;
    --font-weight-default:          400;
    --font-weight-title:            600;
    --font-weight-bold:             600;

    --line-height-default:          1.7;
    --line-height-tight:            1.25;

    --color-font-default:           hsl(0, 0%, 100%);
    --color-font-title:             hsl(0, 0%, 100%);
    --color-font-accent:            hsl(357, 92%, 48%);
    --color-font-muted:             hsl(0, 0%, 70%);

    --text-transform:               none;
    --button-background:            hsl(357, 92%, 48%);
    --button-background-hover:      hsl(357, 92%, 38%);
    --button-text-color:            hsl(0, 0%, 100%);
    --button-font-weight:           600;

    --border-radius-sm:             0;
    --border-radius:                0;
    --border-radius-lrg:            0;
    --border-radius-xl:             0;

    --border-color:                 hsla(0, 0%, 100%, 0.15);
    --border-color-dark:            hsla(0, 0%, 100%, 0.25);

    --container-width:              95rem;
    --container-width-xs:           45rem;
    --container-width-sm:           65rem;
    --container-width-md:           80rem;
    --container-width-lg:           120rem;
    --container-width-xl:           140rem;
}