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

/* Huisstijl geïnspireerd op ea.com/games/the-sims/the-sims-4:
   - Hoog contrast: bijna-zwarte donkere vlakken, helder wit, plumbob-groen als enige accent
   - Subtiele ronding (geen bubble-UI: dat is de in-game stijl, niet de merkstijl)
   - Strakke geometrische sans-serif (Poppins voor titels, Inter voor body)
   - Zware, korte titels in lichte letterspacing — past bij de EA "The Sims 4" hero-stijl */

:root{

    /* Plumbob green */
    --color-primary:                hsl(88, 78%, 45%);
    --color-primary-light:          hsl(88, 78%, 68%);
    --color-primary-dark:           hsl(96, 75%, 28%);

    /* Subtiele koele secundaire — gebruikt EA voor de gradient accents */
    --color-secondary:              hsl(205, 70%, 55%);
    --color-secondary-light:        hsl(205, 80%, 78%);
    --color-secondary-dark:         hsl(210, 65%, 35%);

    /* Backgrounds — strak wit + écht donker zwart-met-groenzweem voor dark sections */
    --color-background-theme-dark:  hsl(150, 18%, 8%);
    --color-background-theme-light: hsl(0, 0%, 97%);
    --color-background-theme-body:  hsl(0, 0%, 100%);

    --color-white:                  hsl(0, 0%, 100%);
    --color-gray:                   hsl(210, 6%, 60%);
    --color-black:                  hsl(150, 20%, 8%);

    /* Typography — strakke geometrische sans-serif, geen rondbubbelig effect */
    --font-family:                  'Inter', sans-serif;
    --font-family-title:            'Poppins', sans-serif;

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

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

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

    /* Font colors */
    --color-font-default:           hsl(150, 12%, 18%);
    --color-font-title:             hsl(150, 22%, 8%);
    --color-font-accent:            hsl(96, 75%, 28%);
    --color-font-muted:             hsl(210, 8%, 45%);

    --text-transform:               none;

    /* Buttons — plumbob-groen pill knop, hoog contrast op hover */
    --button-background:            hsl(88, 78%, 45%);
    --button-background-hover:      hsl(150, 22%, 8%);
    --button-text-color:            hsl(150, 22%, 8%);
    --button-font-weight:           700;

    /* UI — subtiele moderne ronding, niet de overdreven bubble-stijl */
    --border-radius-sm:             4px;
    --border-radius:                10px;
    --border-radius-lrg:            18px;
    --border-radius-xl:             28px;

    --border-color:                 hsla(150, 15%, 25%, 0.12);
    --border-color-dark:            hsla(150, 25%, 10%, 0.3);

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

}