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

/*
 * Theme: wetboek
 * Voor "Wetboek voor Jongeren" — recht & justitie, toegankelijk gemaakt voor jongeren.
 * Diep indigo/marineblauw (vertrouwen, gezag) + warm goud-accent (weegschaal van justitie).
 * Space Grotesk voor koppen, Lexend voor bodytekst (leesbaarheid-gericht font).
 */

:root{

    --color-primary:                hsl(224, 64%, 33%);
    --color-primary-light:          hsl(224, 60%, 48%);
    --color-primary-dark:           hsl(224, 66%, 22%);

    --color-secondary:              hsl(40, 92%, 55%);
    --color-secondary-light:        hsl(41, 95%, 68%);
    --color-secondary-dark:         hsl(36, 85%, 45%);

    --color-background-theme-dark:  hsl(224, 45%, 14%);
    --color-background-theme-light: hsl(222, 40%, 96%);
    --color-background-theme-body:  hsl(0, 0%, 100%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(220, 10%, 55%);
    --color-black:                  hsl(224, 30%, 12%);

    --font-family:                  'Lexend', sans-serif;
    --font-family-title:            'Space Grotesk', sans-serif;
    --font-letter-spacing:          0;
    --font-letter-spacing-title:    -0.01em;

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

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

    --color-font-default:           hsl(222, 25%, 22%);
    --color-font-title:             hsl(224, 55%, 20%);
    --color-font-accent:            hsl(36, 80%, 42%);
    --color-font-muted:             hsl(220, 12%, 48%);

    --text-transform:               none;
    --button-background:            hsl(224, 64%, 33%);
    --button-background-hover:      hsl(224, 60%, 45%);
    --button-text-color:            hsl(0, 0%, 100%);
    --button-font-weight:           600;

    --border-radius-sm:             6px;
    --border-radius:                10px;
    --border-radius-lrg:            18px;
    --border-radius-xl:             24px;

    --border-color:                 hsl(224, 30%, 88%);
    --border-color-dark:            hsl(224, 30%, 76%);

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