/*fonts worden in theme/fonts.css geplaatst dmv postcss.fonts.js - npm run fonts:sync*/

/*
    Palet afgeleid van finner.nl:
    petrol #0D2F2E · turquoise #3CCBC7 · mint #F1FBFA · champagne #F8F6EC
    Turquoise is te licht voor tekst op wit; daarom is primary een verdiepte tint
    en wordt de merkturquoise als primary-light / accent gebruikt.
*/

:root{
    --color-primary:                hsl(178, 64%, 34%);
    --color-primary-light:          hsl(178, 58%, 52%);
    --color-primary-dark:           hsl(178, 70%, 22%);

    --color-secondary:              hsl(178, 57%, 12%);
    --color-secondary-light:        hsl(174, 55%, 92%);
    --color-secondary-dark:         hsl(178, 60%, 7%);

    /* Backgrounds */

    --color-background-theme-dark:  hsl(178, 57%, 12%);
    --color-background-theme-light: hsl(51, 52%, 95%);
    --color-background-theme-body:  hsl(0, 0%, 100%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(178, 6%, 58%);
    --color-black:                  hsl(178, 57%, 12%);

    /* Typography */

    --font-family:                  'Inter', sans-serif;
    --font-family-title:            'Manrope', sans-serif;

    --font-letter-spacing:          0;
    --font-letter-spacing-title:    -0.02em;

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

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

    /* Font colors */

    --color-font-default:           hsl(178, 18%, 22%);
    --color-font-title:             hsl(178, 57%, 12%);
    --color-font-accent:            hsl(178, 64%, 30%);
    --color-font-muted:             hsl(178, 8%, 42%);

    --text-transform:               none;

    /* Buttons */

    --button-background:            hsl(178, 64%, 30%);
    --button-background-hover:      hsl(178, 57%, 12%);
    --button-text-color:            hsl(0, 0%, 100%);
    --button-font-weight:           600;

    /* UI */

    --border-radius-sm:             8px;
    --border-radius:                14px;
    --border-radius-lrg:            24px;
    --border-radius-xl:             40px;

    --border-color:                 hsla(178, 57%, 12%, 0.12);
    --border-color-dark:            hsla(178, 57%, 12%, 0.25);

    /* Layout */

    --container-width:              90rem;
    --container-width-xs:           42rem;
    --container-width-sm:           60rem;
    --container-width-md:           75rem;
    --container-width-lg:           115rem;
    --container-width-xl:           120rem;
}