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

/*
  Spelletjeshuis - speels spel-thema geinspireerd op spele.nl
  Zonnig geel als call-to-action, helder blauw als merkkleur,
  warm oranje als accent en een diepblauwe inkt voor tekst.
*/

:root{
    /* Helder speelblauw (#005FDD) */
    --color-primary:                hsl(214, 100%, 43%);
    --color-primary-light:          hsl(211, 88%, 62%);
    --color-primary-dark:           hsl(217, 100%, 32%);

    /* Warm oranje - leesbaar op wit en met witte tekst erop */
    --color-secondary:              hsl(22, 93%, 40%);
    --color-secondary-light:        hsl(25, 95%, 46%);
    --color-secondary-dark:         hsl(20, 95%, 30%);

    --color-background-theme-dark:  hsl(216, 62%, 15%);
    --color-background-theme-light: hsl(46, 100%, 92%);
    --color-background-theme-body:  hsl(45, 60%, 99%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(215, 15%, 55%);
    --color-black:                  hsl(216, 45%, 12%);

    --font-family:                  'Nunito', sans-serif;
    --font-family-title:            'Quicksand', sans-serif;
    --font-letter-spacing:          0;
    --font-letter-spacing-title:    -0.01em;

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

    /* Extra titelgewichten zodat fonts:sync Quicksand 400/500 ook meeneemt -
       .titleFont wordt op kaarttitels gebruikt zonder bold-class */
    --font-weight-title-regular:    400;
    --font-weight-title-medium:     500;

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

    --color-font-default:           hsl(215, 25%, 22%);
    --color-font-title:             hsl(216, 55%, 13%);
    --color-font-accent:            hsl(22, 93%, 40%);
    --color-font-muted:             hsl(215, 15%, 45%);

    --text-transform:               none;

    /* Zonnige knoppen met diepblauwe tekst - net als de spele.nl CTA */
    --button-background:            hsl(45, 100%, 51%);
    --button-background-hover:      hsl(39, 100%, 50%);
    --button-text-color:            hsl(216, 100%, 22%);
    --button-font-weight:           700;

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

    --border-color:                 hsla(216, 40%, 20%, 0.12);
    --border-color-dark:            hsla(216, 40%, 20%, 0.25);

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