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

/*
    Gamezilla — dark gaming theme.
    Electric monster-green primary + magenta accent on a deep blue-black canvas.
    Titles: Chakra Petch (angular tech display). Body: Rubik (clean geometric).
*/

:root{
    --color-primary:                hsl(147, 90%, 52%);
    --color-primary-light:          hsl(147, 88%, 64%);
    --color-primary-dark:           hsl(147, 92%, 40%);

    --color-secondary:              hsl(325, 95%, 60%);
    --color-secondary-light:        hsl(325, 95%, 70%);
    --color-secondary-dark:         hsl(325, 90%, 50%);

    --color-background-theme-dark:  hsl(222, 32%, 6%);
    --color-background-theme-light: hsl(222, 24%, 11%);
    --color-background-theme-body:  hsl(222, 30%, 8%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(220, 12%, 58%);
    --color-black:                  hsl(222, 40%, 5%);

    --font-family:                  'Rubik', sans-serif;
    --font-family-title:            'Chakra Petch', 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:             700;

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

    --color-font-default:           hsl(210, 22%, 88%);
    --color-font-title:             hsl(0, 0%, 100%);
    --color-font-accent:            hsl(147, 88%, 55%);
    --color-font-muted:             hsl(220, 12%, 58%);

    --text-transform:               uppercase;
    --button-background:            hsl(147, 90%, 52%);
    --button-background-hover:      hsl(147, 88%, 64%);
    --button-text-color:            hsl(222, 40%, 6%);
    --button-font-weight:           700;

    --border-radius-sm:             2px;
    --border-radius:                4px;
    --border-radius-lrg:            8px;
    --border-radius-xl:             12px;

    --border-color:                 hsla(147, 60%, 50%, 0.18);
    --border-color-dark:            hsla(147, 60%, 50%, 0.32);

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