/*fonts worden in theme/fonts.css geplaatst dmv postcss.fonts.js - npm run fonts:sync*/
/* Formula 1 huisstijl — gebaseerd op formula1.com (F1 red #E10600, zwart, wit, Titillium Web). */

:root{
    --color-primary:                hsl(4, 100%, 44%);   /* #E10600 — F1 red */
    --color-primary-light:          hsl(4, 100%, 56%);
    --color-primary-dark:           hsl(4, 100%, 32%);

    --color-secondary:              hsl(0, 0%, 8%);      /* near black */
    --color-secondary-light:        hsl(0, 0%, 22%);
    --color-secondary-dark:         hsl(0, 0%, 0%);

    --color-background-theme-dark:  hsl(0, 0%, 6%);      /* F1 dark UI */
    --color-background-theme-light: hsl(0, 0%, 96%);
    --color-background-theme-body:  hsl(0, 0%, 100%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(0, 0%, 45%);
    --color-black:                  hsl(0, 0%, 0%);

    --font-family:                  'Titillium Web', sans-serif;
    --font-family-title:            'Titillium Web', 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;

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

    --color-font-default:           hsl(0, 0%, 12%);
    --color-font-title:             hsl(0, 0%, 4%);
    --color-font-accent:            hsl(4, 100%, 44%);
    --color-font-muted:             hsl(0, 0%, 40%);

    --text-transform:               uppercase;
    --button-background:            hsl(4, 100%, 44%);
    --button-background-hover:      hsl(0, 0%, 0%);
    --button-text-color:            hsl(0, 0%, 100%);
    --button-font-weight:           700;

    --border-radius-sm:             0;
    --border-radius:                2px;
    --border-radius-lrg:            4px;
    --border-radius-xl:             6px;

    --border-color:                 hsla(0, 0%, 0%, 0.12);
    --border-color-dark:            hsla(0, 0%, 0%, 0.30);

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