/* Luc & Roel — Design Tokens
   Visuele stijl: The Whitest Boy Alive
   Warm, minimalistisch, veel lucht, geen decoratie.

   Dit bestand is de single source of truth voor alle visuele variabelen.
   Alle modules importeren dit in plaats van eigen :root tokens. */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* === Achtergrond === */
    --bg:              #F5F2ED;
    --bg-kaart:        #FFFFFF;
    --bg-sidebar:      #EFECE7;
    --bg-hover:        #EAE7E1;
    --bg-actief:       #E5E2DC;

    /* === Tekst === */
    --tekst:           #2C2C2C;
    --tekst-secundair: #6B6B6B;
    --tekst-tertiair:  #9A9A9A;
    --tekst-invert:    #F5F2ED;

    /* === Borders === */
    --border:          #E0DDD7;
    --border-licht:    #ECEAE5;
    --border-sterk:    #C8C5BF;

    /* === Accent (monochroom + warme accenten) === */
    --accent:          #2C2C2C;
    --accent-hover:    #444444;
    --accent-warm:     #B8860B;
    --accent-warm-bg:  #F5F0E0;
    --accent-warm-hover:#9A7009;

    /* === Semantische kleuren (gedempt) === */
    --groen:           #4A7C59;
    --groen-bg:        #EEF3EF;
    --rood:            #A0453E;
    --rood-bg:         #F5EDED;
    --oranje:          #B8860B;
    --oranje-bg:       #F5F0E0;
    --blauw:           #4A6B8A;
    --blauw-bg:        #EDF1F5;

    /* === Roel-accent (herkenbaar, maar gedempt) === */
    --roel-accent:     #C4870A;
    --roel-accent-bg:  #FAF5E8;
    --roel-accent-hover:#A87008;

    /* === Typografie === */
    --font:            'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-size:       15px;
    --font-weight-licht:   300;
    --font-weight-normaal: 400;
    --font-weight-medium:  500;
    --font-weight-bold:    600;
    --line-height:     1.7;
    --letter-spacing:  0.01em;

    /* === Spacing (8px grid, ruim) === */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   40px;
    --space-2xl:  64px;

    /* === Radii === */
    --radius:     6px;
    --radius-sm:  4px;
    --radius-lg:  10px;

    /* === Schaduwen (minimaal — TWBA: liever geen) === */
    --shadow:         none;
    --shadow-subtiel: 0 1px 2px rgba(0,0,0,0.04);

    /* === Layout === */
    --sidebar-breedte:  240px;
    --content-padding:  48px;
    --max-breedte:      900px;

    /* === Transities (langzaam, zacht) === */
    --transitie:       0.25s ease;
    --transitie-lang:  0.5s ease;

    /* === Backwards-compatible aliassen ===
       Zodat modules die nog var(--zwart) etc. gebruiken
       automatisch de nieuwe waarden krijgen tijdens migratie. */
    --zwart:         #2C2C2C;
    --wit:           #FFFFFF;
    --donkergrijs:   #6B6B6B;
    --lichtgrijs:    #E0DDD7;
    --achtergrond:   #F5F2ED;
    --kaart-bg:      #FFFFFF;
}