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

:root{

    --color-primary: hsl(211, 90%, 58%);
    --color-primary-light: hsl(211, 90%, 72%);
    --color-primary-dark: hsl(211, 90%, 38%);

    --color-secondary: hsl(192, 80%, 60%);
    --color-secondary-light: hsl(192, 80%, 75%);
    --color-secondary-dark: hsl(192, 80%, 40%);

    --color-background-theme-dark: hsl(220, 32%, 5%);
    --color-background-theme-light: hsl(220, 22%, 13%);
    --color-background-theme-body: hsl(220, 28%, 8%);

    --color-white: hsl(0, 0%, 100%);
    --color-gray: hsl(215, 12%, 65%);
    --color-black: hsl(0, 0%, 10%);

    --font-family: 'Rubik', sans-serif;
    --font-family-title: 'Barlow', sans-serif;

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

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

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

    --color-font-default: hsl(210, 25%, 88%);
    --color-font-title: hsl(0, 0%, 100%);
    --color-font-accent: hsl(192, 80%, 65%);
    --color-font-muted: hsl(215, 12%, 65%);

    --button-background: hsl(211, 90%, 58%);
    --button-background-hover: hsl(211, 90%, 72%);
    --button-text-color: hsl(0, 0%, 100%);
    --button-font-weight: 700;

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

    --border-color: hsla(211, 50%, 70%, 0.15);
    --border-color-dark: hsla(211, 60%, 70%, 0.28);

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

}

/* When a section explicitly forces a white background, flip font tokens back
   to dark-on-light so text/titles/borders stay readable. */
.bgWhite{
    --color-font-default: hsl(217, 33%, 22%);
    --color-font-title: hsl(240, 44%, 16%);
    --color-font-accent: hsl(211, 90%, 38%);
    --color-font-muted: hsl(215, 10%, 45%);
    --color-gray: hsl(215, 10%, 45%);
    --border-color: hsl(211, 73%, 92%);
    --border-color-dark: hsl(211, 73%, 26%);
    color: var(--color-font-default);
}