/* ==========================================================================
   SIKB Boorlagen Kleurenpalet

   Base colors only - kleursterkte is calculated via CSS color-mix()

   Usage:
   - Background: class="sikb-bg-{hoofdkleur}" or "sikb-bg-{hoofdkleur}-{bijkleur}"
   - Add kleursterkte: class="sikb-bg-rood sikb-zeer-licht"
   ========================================================================== */

:root {
    /* ==========================================================================
       Base Colors (Neutraal)
       ========================================================================== */

    /* Chromatic colors */
    --sikb-rood: #CC0000;
    --sikb-oranje: #FF8000;
    --sikb-geel: #FFD700;
    --sikb-groen: #228B22;
    --sikb-blauw: #0066CC;
    --sikb-paars: #800080;
    --sikb-bruin: #8B4513;
    --sikb-roestbruin: #A0522D;
    --sikb-beige: #D2B48C;
    --sikb-creme: #FFFDD0;

    /* Achromatic colors */
    --sikb-wit: #FFFFFF;
    --sikb-grijs: #808080;
    --sikb-zwart: #000000;
    --sikb-kleurloos: transparent;

    /* ==========================================================================
       Mixed Colors (70% hoofdkleur + 30% bijkleur)
       ========================================================================== */

    /* Rood + bijkleuren */
    --sikb-rood-oranje: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-oranje));
    --sikb-rood-geel: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-geel));
    --sikb-rood-groen: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-groen));
    --sikb-rood-blauw: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-blauw));
    --sikb-rood-paars: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-paars));
    --sikb-rood-bruin: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-bruin));
    --sikb-rood-roestbruin: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-roestbruin));
    --sikb-rood-beige: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-beige));
    --sikb-rood-creme: color-mix(in srgb, var(--sikb-rood) 70%, var(--sikb-creme));

    /* Oranje + bijkleuren */
    --sikb-oranje-rood: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-rood));
    --sikb-oranje-geel: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-geel));
    --sikb-oranje-groen: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-groen));
    --sikb-oranje-blauw: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-blauw));
    --sikb-oranje-paars: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-paars));
    --sikb-oranje-bruin: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-bruin));
    --sikb-oranje-roestbruin: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-roestbruin));
    --sikb-oranje-beige: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-beige));
    --sikb-oranje-creme: color-mix(in srgb, var(--sikb-oranje) 70%, var(--sikb-creme));

    /* Geel + bijkleuren */
    --sikb-geel-rood: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-rood));
    --sikb-geel-oranje: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-oranje));
    --sikb-geel-groen: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-groen));
    --sikb-geel-blauw: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-blauw));
    --sikb-geel-paars: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-paars));
    --sikb-geel-bruin: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-bruin));
    --sikb-geel-roestbruin: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-roestbruin));
    --sikb-geel-beige: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-beige));
    --sikb-geel-creme: color-mix(in srgb, var(--sikb-geel) 70%, var(--sikb-creme));

    /* Groen + bijkleuren */
    --sikb-groen-rood: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-rood));
    --sikb-groen-oranje: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-oranje));
    --sikb-groen-geel: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-geel));
    --sikb-groen-blauw: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-blauw));
    --sikb-groen-paars: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-paars));
    --sikb-groen-bruin: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-bruin));
    --sikb-groen-roestbruin: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-roestbruin));
    --sikb-groen-beige: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-beige));
    --sikb-groen-creme: color-mix(in srgb, var(--sikb-groen) 70%, var(--sikb-creme));

    /* Blauw + bijkleuren */
    --sikb-blauw-rood: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-rood));
    --sikb-blauw-oranje: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-oranje));
    --sikb-blauw-geel: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-geel));
    --sikb-blauw-groen: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-groen));
    --sikb-blauw-paars: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-paars));
    --sikb-blauw-bruin: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-bruin));
    --sikb-blauw-roestbruin: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-roestbruin));
    --sikb-blauw-beige: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-beige));
    --sikb-blauw-creme: color-mix(in srgb, var(--sikb-blauw) 70%, var(--sikb-creme));

    /* Paars + bijkleuren */
    --sikb-paars-rood: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-rood));
    --sikb-paars-oranje: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-oranje));
    --sikb-paars-geel: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-geel));
    --sikb-paars-groen: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-groen));
    --sikb-paars-blauw: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-blauw));
    --sikb-paars-bruin: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-bruin));
    --sikb-paars-roestbruin: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-roestbruin));
    --sikb-paars-beige: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-beige));
    --sikb-paars-creme: color-mix(in srgb, var(--sikb-paars) 70%, var(--sikb-creme));

    /* Bruin + bijkleuren */
    --sikb-bruin-rood: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-rood));
    --sikb-bruin-oranje: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-oranje));
    --sikb-bruin-geel: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-geel));
    --sikb-bruin-groen: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-groen));
    --sikb-bruin-blauw: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-blauw));
    --sikb-bruin-paars: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-paars));
    --sikb-bruin-roestbruin: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-roestbruin));
    --sikb-bruin-beige: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-beige));
    --sikb-bruin-creme: color-mix(in srgb, var(--sikb-bruin) 70%, var(--sikb-creme));

    /* Roestbruin + bijkleuren */
    --sikb-roestbruin-rood: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-rood));
    --sikb-roestbruin-oranje: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-oranje));
    --sikb-roestbruin-geel: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-geel));
    --sikb-roestbruin-groen: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-groen));
    --sikb-roestbruin-blauw: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-blauw));
    --sikb-roestbruin-paars: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-paars));
    --sikb-roestbruin-bruin: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-bruin));
    --sikb-roestbruin-beige: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-beige));
    --sikb-roestbruin-creme: color-mix(in srgb, var(--sikb-roestbruin) 70%, var(--sikb-creme));

    /* Beige + bijkleuren */
    --sikb-beige-rood: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-rood));
    --sikb-beige-oranje: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-oranje));
    --sikb-beige-geel: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-geel));
    --sikb-beige-groen: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-groen));
    --sikb-beige-blauw: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-blauw));
    --sikb-beige-paars: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-paars));
    --sikb-beige-bruin: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-bruin));
    --sikb-beige-roestbruin: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-roestbruin));
    --sikb-beige-creme: color-mix(in srgb, var(--sikb-beige) 70%, var(--sikb-creme));

    /* Creme + bijkleuren */
    --sikb-creme-rood: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-rood));
    --sikb-creme-oranje: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-oranje));
    --sikb-creme-geel: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-geel));
    --sikb-creme-groen: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-groen));
    --sikb-creme-blauw: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-blauw));
    --sikb-creme-paars: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-paars));
    --sikb-creme-bruin: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-bruin));
    --sikb-creme-roestbruin: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-roestbruin));
    --sikb-creme-beige: color-mix(in srgb, var(--sikb-creme) 70%, var(--sikb-beige));
}

/* ==========================================================================
   Background Color Classes - Base colors
   ========================================================================== */

.sikb-bg-rood { background-color: var(--sikb-rood); }
.sikb-bg-oranje { background-color: var(--sikb-oranje); }
.sikb-bg-geel { background-color: var(--sikb-geel); }
.sikb-bg-groen { background-color: var(--sikb-groen); }
.sikb-bg-blauw { background-color: var(--sikb-blauw); }
.sikb-bg-paars { background-color: var(--sikb-paars); }
.sikb-bg-bruin { background-color: var(--sikb-bruin); }
.sikb-bg-roestbruin { background-color: var(--sikb-roestbruin); }
.sikb-bg-beige { background-color: var(--sikb-beige); }
.sikb-bg-creme { background-color: var(--sikb-creme); }
.sikb-bg-wit { background-color: var(--sikb-wit); }
.sikb-bg-grijs { background-color: var(--sikb-grijs); }
.sikb-bg-zwart { background-color: var(--sikb-zwart); }
.sikb-bg-kleurloos { background-color: var(--sikb-kleurloos); }

/* ==========================================================================
   Background Color Classes - Mixed colors (hoofdkleur-bijkleur)
   ========================================================================== */

.sikb-bg-rood-oranje { background-color: var(--sikb-rood-oranje); }
.sikb-bg-rood-geel { background-color: var(--sikb-rood-geel); }
.sikb-bg-rood-groen { background-color: var(--sikb-rood-groen); }
.sikb-bg-rood-blauw { background-color: var(--sikb-rood-blauw); }
.sikb-bg-rood-paars { background-color: var(--sikb-rood-paars); }
.sikb-bg-rood-bruin { background-color: var(--sikb-rood-bruin); }
.sikb-bg-rood-roestbruin { background-color: var(--sikb-rood-roestbruin); }
.sikb-bg-rood-beige { background-color: var(--sikb-rood-beige); }
.sikb-bg-rood-creme { background-color: var(--sikb-rood-creme); }

.sikb-bg-oranje-rood { background-color: var(--sikb-oranje-rood); }
.sikb-bg-oranje-geel { background-color: var(--sikb-oranje-geel); }
.sikb-bg-oranje-groen { background-color: var(--sikb-oranje-groen); }
.sikb-bg-oranje-blauw { background-color: var(--sikb-oranje-blauw); }
.sikb-bg-oranje-paars { background-color: var(--sikb-oranje-paars); }
.sikb-bg-oranje-bruin { background-color: var(--sikb-oranje-bruin); }
.sikb-bg-oranje-roestbruin { background-color: var(--sikb-oranje-roestbruin); }
.sikb-bg-oranje-beige { background-color: var(--sikb-oranje-beige); }
.sikb-bg-oranje-creme { background-color: var(--sikb-oranje-creme); }

.sikb-bg-geel-rood { background-color: var(--sikb-geel-rood); }
.sikb-bg-geel-oranje { background-color: var(--sikb-geel-oranje); }
.sikb-bg-geel-groen { background-color: var(--sikb-geel-groen); }
.sikb-bg-geel-blauw { background-color: var(--sikb-geel-blauw); }
.sikb-bg-geel-paars { background-color: var(--sikb-geel-paars); }
.sikb-bg-geel-bruin { background-color: var(--sikb-geel-bruin); }
.sikb-bg-geel-roestbruin { background-color: var(--sikb-geel-roestbruin); }
.sikb-bg-geel-beige { background-color: var(--sikb-geel-beige); }
.sikb-bg-geel-creme { background-color: var(--sikb-geel-creme); }

.sikb-bg-groen-rood { background-color: var(--sikb-groen-rood); }
.sikb-bg-groen-oranje { background-color: var(--sikb-groen-oranje); }
.sikb-bg-groen-geel { background-color: var(--sikb-groen-geel); }
.sikb-bg-groen-blauw { background-color: var(--sikb-groen-blauw); }
.sikb-bg-groen-paars { background-color: var(--sikb-groen-paars); }
.sikb-bg-groen-bruin { background-color: var(--sikb-groen-bruin); }
.sikb-bg-groen-roestbruin { background-color: var(--sikb-groen-roestbruin); }
.sikb-bg-groen-beige { background-color: var(--sikb-groen-beige); }
.sikb-bg-groen-creme { background-color: var(--sikb-groen-creme); }

.sikb-bg-blauw-rood { background-color: var(--sikb-blauw-rood); }
.sikb-bg-blauw-oranje { background-color: var(--sikb-blauw-oranje); }
.sikb-bg-blauw-geel { background-color: var(--sikb-blauw-geel); }
.sikb-bg-blauw-groen { background-color: var(--sikb-blauw-groen); }
.sikb-bg-blauw-paars { background-color: var(--sikb-blauw-paars); }
.sikb-bg-blauw-bruin { background-color: var(--sikb-blauw-bruin); }
.sikb-bg-blauw-roestbruin { background-color: var(--sikb-blauw-roestbruin); }
.sikb-bg-blauw-beige { background-color: var(--sikb-blauw-beige); }
.sikb-bg-blauw-creme { background-color: var(--sikb-blauw-creme); }

.sikb-bg-paars-rood { background-color: var(--sikb-paars-rood); }
.sikb-bg-paars-oranje { background-color: var(--sikb-paars-oranje); }
.sikb-bg-paars-geel { background-color: var(--sikb-paars-geel); }
.sikb-bg-paars-groen { background-color: var(--sikb-paars-groen); }
.sikb-bg-paars-blauw { background-color: var(--sikb-paars-blauw); }
.sikb-bg-paars-bruin { background-color: var(--sikb-paars-bruin); }
.sikb-bg-paars-roestbruin { background-color: var(--sikb-paars-roestbruin); }
.sikb-bg-paars-beige { background-color: var(--sikb-paars-beige); }
.sikb-bg-paars-creme { background-color: var(--sikb-paars-creme); }

.sikb-bg-bruin-rood { background-color: var(--sikb-bruin-rood); }
.sikb-bg-bruin-oranje { background-color: var(--sikb-bruin-oranje); }
.sikb-bg-bruin-geel { background-color: var(--sikb-bruin-geel); }
.sikb-bg-bruin-groen { background-color: var(--sikb-bruin-groen); }
.sikb-bg-bruin-blauw { background-color: var(--sikb-bruin-blauw); }
.sikb-bg-bruin-paars { background-color: var(--sikb-bruin-paars); }
.sikb-bg-bruin-roestbruin { background-color: var(--sikb-bruin-roestbruin); }
.sikb-bg-bruin-beige { background-color: var(--sikb-bruin-beige); }
.sikb-bg-bruin-creme { background-color: var(--sikb-bruin-creme); }

.sikb-bg-roestbruin-rood { background-color: var(--sikb-roestbruin-rood); }
.sikb-bg-roestbruin-oranje { background-color: var(--sikb-roestbruin-oranje); }
.sikb-bg-roestbruin-geel { background-color: var(--sikb-roestbruin-geel); }
.sikb-bg-roestbruin-groen { background-color: var(--sikb-roestbruin-groen); }
.sikb-bg-roestbruin-blauw { background-color: var(--sikb-roestbruin-blauw); }
.sikb-bg-roestbruin-paars { background-color: var(--sikb-roestbruin-paars); }
.sikb-bg-roestbruin-bruin { background-color: var(--sikb-roestbruin-bruin); }
.sikb-bg-roestbruin-beige { background-color: var(--sikb-roestbruin-beige); }
.sikb-bg-roestbruin-creme { background-color: var(--sikb-roestbruin-creme); }

.sikb-bg-beige-rood { background-color: var(--sikb-beige-rood); }
.sikb-bg-beige-oranje { background-color: var(--sikb-beige-oranje); }
.sikb-bg-beige-geel { background-color: var(--sikb-beige-geel); }
.sikb-bg-beige-groen { background-color: var(--sikb-beige-groen); }
.sikb-bg-beige-blauw { background-color: var(--sikb-beige-blauw); }
.sikb-bg-beige-paars { background-color: var(--sikb-beige-paars); }
.sikb-bg-beige-bruin { background-color: var(--sikb-beige-bruin); }
.sikb-bg-beige-roestbruin { background-color: var(--sikb-beige-roestbruin); }
.sikb-bg-beige-creme { background-color: var(--sikb-beige-creme); }

.sikb-bg-creme-rood { background-color: var(--sikb-creme-rood); }
.sikb-bg-creme-oranje { background-color: var(--sikb-creme-oranje); }
.sikb-bg-creme-geel { background-color: var(--sikb-creme-geel); }
.sikb-bg-creme-groen { background-color: var(--sikb-creme-groen); }
.sikb-bg-creme-blauw { background-color: var(--sikb-creme-blauw); }
.sikb-bg-creme-paars { background-color: var(--sikb-creme-paars); }
.sikb-bg-creme-bruin { background-color: var(--sikb-creme-bruin); }
.sikb-bg-creme-roestbruin { background-color: var(--sikb-creme-roestbruin); }
.sikb-bg-creme-beige { background-color: var(--sikb-creme-beige); }

/* ==========================================================================
   Kleursterkte Modifier Classes
   Uses CSS color-mix() to apply lightness/darkness

   zeer-licht: 80% white
   licht: 50% white
   neutraal: base color (no modifier needed)
   donker: 30% black
   zeer-donker: 60% black
   ========================================================================== */

/* Kleursterkte modifiers - work with any sikb-bg-* class */
[class*="sikb-bg-"].sikb-zeer-licht {
    background-color: color-mix(in srgb, var(--bg-color) 20%, white);
}
[class*="sikb-bg-"].sikb-licht {
    background-color: color-mix(in srgb, var(--bg-color) 50%, white);
}
[class*="sikb-bg-"].sikb-donker {
    background-color: color-mix(in srgb, var(--bg-color) 70%, black);
}
[class*="sikb-bg-"].sikb-zeer-donker {
    background-color: color-mix(in srgb, var(--bg-color) 40%, black);
}

/* Set --bg-color for each base class */
.sikb-bg-rood { --bg-color: var(--sikb-rood); }
.sikb-bg-oranje { --bg-color: var(--sikb-oranje); }
.sikb-bg-geel { --bg-color: var(--sikb-geel); }
.sikb-bg-groen { --bg-color: var(--sikb-groen); }
.sikb-bg-blauw { --bg-color: var(--sikb-blauw); }
.sikb-bg-paars { --bg-color: var(--sikb-paars); }
.sikb-bg-bruin { --bg-color: var(--sikb-bruin); }
.sikb-bg-roestbruin { --bg-color: var(--sikb-roestbruin); }
.sikb-bg-beige { --bg-color: var(--sikb-beige); }
.sikb-bg-creme { --bg-color: var(--sikb-creme); }
.sikb-bg-wit { --bg-color: var(--sikb-wit); }
.sikb-bg-grijs { --bg-color: var(--sikb-grijs); }
.sikb-bg-zwart { --bg-color: var(--sikb-zwart); }

/* Set --bg-color for mixed color classes */
.sikb-bg-rood-oranje { --bg-color: var(--sikb-rood-oranje); }
.sikb-bg-rood-geel { --bg-color: var(--sikb-rood-geel); }
.sikb-bg-rood-groen { --bg-color: var(--sikb-rood-groen); }
.sikb-bg-rood-blauw { --bg-color: var(--sikb-rood-blauw); }
.sikb-bg-rood-paars { --bg-color: var(--sikb-rood-paars); }
.sikb-bg-rood-bruin { --bg-color: var(--sikb-rood-bruin); }
.sikb-bg-rood-roestbruin { --bg-color: var(--sikb-rood-roestbruin); }
.sikb-bg-rood-beige { --bg-color: var(--sikb-rood-beige); }
.sikb-bg-rood-creme { --bg-color: var(--sikb-rood-creme); }

.sikb-bg-oranje-rood { --bg-color: var(--sikb-oranje-rood); }
.sikb-bg-oranje-geel { --bg-color: var(--sikb-oranje-geel); }
.sikb-bg-oranje-groen { --bg-color: var(--sikb-oranje-groen); }
.sikb-bg-oranje-blauw { --bg-color: var(--sikb-oranje-blauw); }
.sikb-bg-oranje-paars { --bg-color: var(--sikb-oranje-paars); }
.sikb-bg-oranje-bruin { --bg-color: var(--sikb-oranje-bruin); }
.sikb-bg-oranje-roestbruin { --bg-color: var(--sikb-oranje-roestbruin); }
.sikb-bg-oranje-beige { --bg-color: var(--sikb-oranje-beige); }
.sikb-bg-oranje-creme { --bg-color: var(--sikb-oranje-creme); }

.sikb-bg-geel-rood { --bg-color: var(--sikb-geel-rood); }
.sikb-bg-geel-oranje { --bg-color: var(--sikb-geel-oranje); }
.sikb-bg-geel-groen { --bg-color: var(--sikb-geel-groen); }
.sikb-bg-geel-blauw { --bg-color: var(--sikb-geel-blauw); }
.sikb-bg-geel-paars { --bg-color: var(--sikb-geel-paars); }
.sikb-bg-geel-bruin { --bg-color: var(--sikb-geel-bruin); }
.sikb-bg-geel-roestbruin { --bg-color: var(--sikb-geel-roestbruin); }
.sikb-bg-geel-beige { --bg-color: var(--sikb-geel-beige); }
.sikb-bg-geel-creme { --bg-color: var(--sikb-geel-creme); }

.sikb-bg-groen-rood { --bg-color: var(--sikb-groen-rood); }
.sikb-bg-groen-oranje { --bg-color: var(--sikb-groen-oranje); }
.sikb-bg-groen-geel { --bg-color: var(--sikb-groen-geel); }
.sikb-bg-groen-blauw { --bg-color: var(--sikb-groen-blauw); }
.sikb-bg-groen-paars { --bg-color: var(--sikb-groen-paars); }
.sikb-bg-groen-bruin { --bg-color: var(--sikb-groen-bruin); }
.sikb-bg-groen-roestbruin { --bg-color: var(--sikb-groen-roestbruin); }
.sikb-bg-groen-beige { --bg-color: var(--sikb-groen-beige); }
.sikb-bg-groen-creme { --bg-color: var(--sikb-groen-creme); }

.sikb-bg-blauw-rood { --bg-color: var(--sikb-blauw-rood); }
.sikb-bg-blauw-oranje { --bg-color: var(--sikb-blauw-oranje); }
.sikb-bg-blauw-geel { --bg-color: var(--sikb-blauw-geel); }
.sikb-bg-blauw-groen { --bg-color: var(--sikb-blauw-groen); }
.sikb-bg-blauw-paars { --bg-color: var(--sikb-blauw-paars); }
.sikb-bg-blauw-bruin { --bg-color: var(--sikb-blauw-bruin); }
.sikb-bg-blauw-roestbruin { --bg-color: var(--sikb-blauw-roestbruin); }
.sikb-bg-blauw-beige { --bg-color: var(--sikb-blauw-beige); }
.sikb-bg-blauw-creme { --bg-color: var(--sikb-blauw-creme); }

.sikb-bg-paars-rood { --bg-color: var(--sikb-paars-rood); }
.sikb-bg-paars-oranje { --bg-color: var(--sikb-paars-oranje); }
.sikb-bg-paars-geel { --bg-color: var(--sikb-paars-geel); }
.sikb-bg-paars-groen { --bg-color: var(--sikb-paars-groen); }
.sikb-bg-paars-blauw { --bg-color: var(--sikb-paars-blauw); }
.sikb-bg-paars-bruin { --bg-color: var(--sikb-paars-bruin); }
.sikb-bg-paars-roestbruin { --bg-color: var(--sikb-paars-roestbruin); }
.sikb-bg-paars-beige { --bg-color: var(--sikb-paars-beige); }
.sikb-bg-paars-creme { --bg-color: var(--sikb-paars-creme); }

.sikb-bg-bruin-rood { --bg-color: var(--sikb-bruin-rood); }
.sikb-bg-bruin-oranje { --bg-color: var(--sikb-bruin-oranje); }
.sikb-bg-bruin-geel { --bg-color: var(--sikb-bruin-geel); }
.sikb-bg-bruin-groen { --bg-color: var(--sikb-bruin-groen); }
.sikb-bg-bruin-blauw { --bg-color: var(--sikb-bruin-blauw); }
.sikb-bg-bruin-paars { --bg-color: var(--sikb-bruin-paars); }
.sikb-bg-bruin-roestbruin { --bg-color: var(--sikb-bruin-roestbruin); }
.sikb-bg-bruin-beige { --bg-color: var(--sikb-bruin-beige); }
.sikb-bg-bruin-creme { --bg-color: var(--sikb-bruin-creme); }

.sikb-bg-roestbruin-rood { --bg-color: var(--sikb-roestbruin-rood); }
.sikb-bg-roestbruin-oranje { --bg-color: var(--sikb-roestbruin-oranje); }
.sikb-bg-roestbruin-geel { --bg-color: var(--sikb-roestbruin-geel); }
.sikb-bg-roestbruin-groen { --bg-color: var(--sikb-roestbruin-groen); }
.sikb-bg-roestbruin-blauw { --bg-color: var(--sikb-roestbruin-blauw); }
.sikb-bg-roestbruin-paars { --bg-color: var(--sikb-roestbruin-paars); }
.sikb-bg-roestbruin-bruin { --bg-color: var(--sikb-roestbruin-bruin); }
.sikb-bg-roestbruin-beige { --bg-color: var(--sikb-roestbruin-beige); }
.sikb-bg-roestbruin-creme { --bg-color: var(--sikb-roestbruin-creme); }

.sikb-bg-beige-rood { --bg-color: var(--sikb-beige-rood); }
.sikb-bg-beige-oranje { --bg-color: var(--sikb-beige-oranje); }
.sikb-bg-beige-geel { --bg-color: var(--sikb-beige-geel); }
.sikb-bg-beige-groen { --bg-color: var(--sikb-beige-groen); }
.sikb-bg-beige-blauw { --bg-color: var(--sikb-beige-blauw); }
.sikb-bg-beige-paars { --bg-color: var(--sikb-beige-paars); }
.sikb-bg-beige-bruin { --bg-color: var(--sikb-beige-bruin); }
.sikb-bg-beige-roestbruin { --bg-color: var(--sikb-beige-roestbruin); }
.sikb-bg-beige-creme { --bg-color: var(--sikb-beige-creme); }

.sikb-bg-creme-rood { --bg-color: var(--sikb-creme-rood); }
.sikb-bg-creme-oranje { --bg-color: var(--sikb-creme-oranje); }
.sikb-bg-creme-geel { --bg-color: var(--sikb-creme-geel); }
.sikb-bg-creme-groen { --bg-color: var(--sikb-creme-groen); }
.sikb-bg-creme-blauw { --bg-color: var(--sikb-creme-blauw); }
.sikb-bg-creme-paars { --bg-color: var(--sikb-creme-paars); }
.sikb-bg-creme-bruin { --bg-color: var(--sikb-creme-bruin); }
.sikb-bg-creme-roestbruin { --bg-color: var(--sikb-creme-roestbruin); }
.sikb-bg-creme-beige { --bg-color: var(--sikb-creme-beige); }

/* ==========================================================================
   Mediaan Fill Patterns

   Pattern types based on grain size (korrelgrootte):
   - Dots for sand/gravel (fijn to grof)
   - Horizontal lines for clay/peat (slap to vast)

   Usage: class="sikb-bg-bruin sikb-mediaan-fijn"
   ========================================================================== */

/* Base pattern setup - all patterns use currentColor which inherits from --pattern-color */
[class*="sikb-mediaan-"] {
    --pattern-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: multiply;
}

/* nvt - niet van toepassing (no pattern) */
.sikb-mediaan-nvt {
    /* No pattern applied */
}

/* ==========================================================================
   Korrelgrootte patterns (grain size) - Dots
   Smaller dots = finer grain, larger dots = coarser grain
   ========================================================================== */

/* Uiterst fijn - extremely fine (tiny dots, dense) */
.sikb-mediaan-uiterst-fijn {
    background-image:
        radial-gradient(circle, var(--pattern-color) 0.3px, transparent 0.3px);
    background-size: 3px 3px;
}

/* Zeer fijn - very fine */
.sikb-mediaan-zeer-fijn {
    background-image:
        radial-gradient(circle, var(--pattern-color) 0.5px, transparent 0.5px);
    background-size: 4px 4px;
}

/* Matig fijn - moderately fine */
.sikb-mediaan-matig-fijn {
    background-image:
        radial-gradient(circle, var(--pattern-color) 0.7px, transparent 0.7px);
    background-size: 5px 5px;
}

/* Fijn - fine */
.sikb-mediaan-fijn {
    background-image:
        radial-gradient(circle, var(--pattern-color) 1px, transparent 1px);
    background-size: 6px 6px;
}

/* Matig grof - moderately coarse */
.sikb-mediaan-matig-grof {
    background-image:
        radial-gradient(circle, var(--pattern-color) 1.5px, transparent 1.5px);
    background-size: 8px 8px;
}

/* Grof - coarse */
.sikb-mediaan-grof {
    background-image:
        radial-gradient(circle, var(--pattern-color) 2px, transparent 2px);
    background-size: 10px 10px;
}

/* Zeer grof - very coarse */
.sikb-mediaan-zeer-grof {
    background-image:
        radial-gradient(circle, var(--pattern-color) 3px, transparent 3px);
    background-size: 14px 14px;
}

/* Uiterst grof - extremely coarse (large dots, sparse) */
.sikb-mediaan-uiterst-grof {
    background-image:
        radial-gradient(circle, var(--pattern-color) 4px, transparent 4px);
    background-size: 18px 18px;
}

/* ==========================================================================
   Consistentie patterns (consistency) - Horizontal lines
   For clay, peat, and similar materials
   ========================================================================== */

/* Slap - soft/loose (thin dashed lines, sparse) */
.sikb-mediaan-slap {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            var(--pattern-color) 8px,
            var(--pattern-color) 9px
        );
}

/* Matig stevig - moderately firm (medium lines) */
.sikb-mediaan-matig-stevig {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 5px,
            var(--pattern-color) 5px,
            var(--pattern-color) 7px
        );
}

/* Vast - firm/solid (thick lines, dense) */
.sikb-mediaan-vast {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            var(--pattern-color) 3px,
            var(--pattern-color) 6px
        );
}