/* variables.css — design tokens voor Aim's Rooster */
:root {
    /* ── Kleuren ─────────────────────────────────────────── */
    --kleur-achtergrond:  #F4F4F6;
    --kleur-wit:          #FFFFFF;
    --kleur-accent-geel:  #FBCB3E;
    --kleur-accent-groen: #5DC484;
    --kleur-accent-paars: #C9B8F0;
    --kleur-accent-blauw: #93C5FD;
    --kleur-tekst:        #16161E;
    --kleur-subtiel:      #6B7280;
    --kleur-rand:         #E8E8EF;
    --kleur-rand-focus:   #FBCB3E;

    /* ── Statuskleuren ───────────────────────────────────── */
    --status-goedgekeurd:        #6BCB77;
    --status-goedgekeurd-bg:     #DCFCE7;
    --status-in-behandeling:     #F5C842;
    --status-in-behandeling-bg:  #FEF9C3;
    --status-afgewezen:          #F28B82;
    --status-afgewezen-bg:       #FEE2E2;
    --status-ingepland:          #93C5FD;
    --status-ingepland-bg:       #DBEAFE;
    --status-vrij:               #D1D5DB;
    --status-vrij-bg:            #F3F4F6;

    /* ── Feedback kleuren ────────────────────────────────── */
    --kleur-fout:         #DC2626;
    --kleur-fout-bg:      #FEE2E2;
    --kleur-succes:       #16A34A;
    --kleur-succes-bg:    #DCFCE7;
    --kleur-info:         #2563EB;
    --kleur-info-bg:      #DBEAFE;

    /* ── Typografie ──────────────────────────────────────── */
    --font-basis:    'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --tekst-xs:      0.75rem;    /* 12px */
    --tekst-sm:      0.875rem;   /* 14px */
    --tekst-basis:   1rem;       /* 16px */
    --tekst-lg:      1.125rem;   /* 18px */
    --tekst-xl:      1.25rem;    /* 20px */
    --tekst-2xl:     1.5rem;     /* 24px */
    --tekst-3xl:     1.875rem;   /* 30px */
    --regelafstand:  1.6;
    --gewicht-normaal: 400;
    --gewicht-medium:  500;
    --gewicht-vet:     700;

    /* ── Afronding ───────────────────────────────────────── */
    --radius-xs:   6px;
    --radius-sm:   12px;
    --radius-md:   18px;
    --radius-lg:   24px;
    --radius-xl:   32px;
    --radius-pill: 999px;

    /* ── Schaduwen ───────────────────────────────────────── */
    --schaduw-sm:    0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --schaduw-md:    0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --schaduw-lg:    0 12px 36px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.05);
    --schaduw-focus: 0 0 0 3px rgba(251, 203, 62, 0.4);

    /* ── Spacing ─────────────────────────────────────────── */
    --ruimte-xs:    4px;
    --ruimte-sm:    8px;
    --ruimte-md:    16px;
    --ruimte-lg:    24px;
    --ruimte-xl:    32px;
    --ruimte-2xl:   48px;
    --ruimte-3xl:   64px;

    /* ── Lay-out ─────────────────────────────────────────── */
    --breedte-container:  960px;
    --breedte-smal:       480px;
    --hoogte-header:      64px;
    --hoogte-nav-mobiel:  64px;

    /* ── Overgangen ──────────────────────────────────────── */
    --overgang-snel:     0.15s ease;
    --overgang-normaal:  0.25s ease;
}