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

/*
  Theme: "hemel" (gokkastenhemel.nl)
  Kleuren afgeleid van het huidige ontwerp:
    - Koningsblauw  #284d84  -> primair (links, titels, knoppen)
    - Zachte hemelblauw #89aabe / #f0f7f8 -> achtergronden ("hemel/wolken")
    - Limoengroen #869d0e / #bed05d -> secundair accent
  Sfeer: luchtig, hemels, speels maar betrouwbaar.
  Lettertypen: Poppins (titels) + Nunito (tekst).
*/

:root{

    --color-primary:                hsl(216, 53%, 34%);   /* #284d84 koningsblauw */
    --color-primary-light:          hsl(216, 53%, 47%);
    --color-primary-dark:           hsl(216, 55%, 23%);

    --color-secondary:              hsl(72, 55%, 42%);    /* limoengroen accent */
    --color-secondary-light:        hsl(70, 55%, 60%);    /* #bed05d */
    --color-secondary-dark:         hsl(74, 72%, 33%);    /* #869d0e */

    --color-background-theme-dark:  hsl(217, 46%, 15%);   /* diepe nachtblauwe hemel */
    --color-background-theme-light: hsl(198, 44%, 95%);   /* #f0f7f8 lichte hemel */
    --color-background-theme-body:  hsl(200, 50%, 99%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(0, 0%, 50%);
    --color-black:                  hsl(216, 30%, 12%);

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

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

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

    --color-font-default:           hsl(216, 28%, 24%);
    --color-font-title:             hsl(216, 55%, 22%);
    --color-font-accent:            hsl(74, 68%, 34%);    /* groen accent voor highlights */
    --color-font-muted:             hsl(214, 14%, 48%);

    --text-transform:               none;
    --button-background:            hsl(216, 53%, 34%);
    --button-background-hover:      hsl(216, 55%, 26%);
    --button-text-color:            hsl(0, 0%, 100%);
    --button-font-weight:           700;

    --border-radius-sm:             6px;
    --border-radius:                12px;
    --border-radius-lrg:            20px;
    --border-radius-xl:             28px;

    --border-color:                 hsl(206, 40%, 88%);
    --border-color-dark:            hsl(216, 40%, 62%);

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

}