/* Gebruik color-mix(in oklab, …) voor voorspelbare perceptuele menging.
   “25% donkerder” = mix met black 25% (idem 50%).
   Transparantie-steps via mix met transparent (alpha). */

:root{
	/* Basis */
	--bgcolor_dark:   #271c13;
	--color_accents:  #644932;
	--bgcolor_light:  #f6f3ec;
	--textcolor:      #f6f3ec;
	--headcolor:      #8b745f;
	--colormid: 	  #75726d;
	
	

	--bgcolor_darker:  color-mix(in oklab, var(--bgcolor_dark) 75%, black 25%);  /* 25% donkerder */
	--bgcolor_darkest: color-mix(in oklab, var(--bgcolor_dark) 50%, black 50%);  /* 50% donkerder */

	/* Let op: je vroeg “25%/50% donkerder” ook voor light → dus mix met black */
	--bgcolor_lighter:  color-mix(in oklab, var(--bgcolor_light) 75%, black 25%); /* 25% donkerder */
	--bgcolor_lightest: color-mix(in oklab, var(--bgcolor_light) 50%, black 50%); /* 50% donkerder */

	/* (Optioneel) échte lichtere varianten van light via white-mix */
	--bgcolor_light_lighter25: color-mix(in oklab, var(--bgcolor_light) 85%, white 15%);
	--bgcolor_light_lighter50: color-mix(in oklab, var(--bgcolor_light) 70%, white 30%);

	
	/* Donkerder varianten (zoals gevraagd) */
	--bgcolor_dark_lighter:  color-mix(in oklab, var(--color_accents) 85%, var(--bgcolor_dark) 15%);  /* 25% donkerder */
	
	
	/* Head & accent donkerder varianten */
	--headcolor_darker:   color-mix(in oklab, var(--headcolor) 75%, black 25%);
	--headcolor_darkest:  color-mix(in oklab, var(--headcolor) 50%, black 50%);
	--accents_darker:     color-mix(in oklab, var(--color_accents) 75%, black 25%);
	--accents_darkest:    color-mix(in oklab, var(--color_accents) 50%, black 50%);
}

/* Transparantie-steps 10–90% voor alle relevante kleuren */
:root{
	/* bgcolor_dark α-steps */
	--bgcolor_dark10: color-mix(in oklab, var(--bgcolor_dark) 10%, transparent);
	--bgcolor_dark20: color-mix(in oklab, var(--bgcolor_dark) 20%, transparent);
	--bgcolor_dark30: color-mix(in oklab, var(--bgcolor_dark) 30%, transparent);
	--bgcolor_dark40: color-mix(in oklab, var(--bgcolor_dark) 40%, transparent);
	--bgcolor_dark50: color-mix(in oklab, var(--bgcolor_dark) 50%, transparent);
	--bgcolor_dark60: color-mix(in oklab, var(--bgcolor_dark) 60%, transparent);
	--bgcolor_dark70: color-mix(in oklab, var(--bgcolor_dark) 70%, transparent);
	--bgcolor_dark80: color-mix(in oklab, var(--bgcolor_dark) 80%, transparent);
	--bgcolor_dark90: color-mix(in oklab, var(--bgcolor_dark) 90%, transparent);

	/* bgcolor_light α-steps */
	--bgcolor_light10: color-mix(in oklab, var(--bgcolor_light) 10%, transparent);
	--bgcolor_light20: color-mix(in oklab, var(--bgcolor_light) 20%, transparent);
	--bgcolor_light30: color-mix(in oklab, var(--bgcolor_light) 30%, transparent);
	--bgcolor_light40: color-mix(in oklab, var(--bgcolor_light) 40%, transparent);
	--bgcolor_light50: color-mix(in oklab, var(--bgcolor_light) 50%, transparent);
	--bgcolor_light60: color-mix(in oklab, var(--bgcolor_light) 60%, transparent);
	--bgcolor_light70: color-mix(in oklab, var(--bgcolor_light) 70%, transparent);
	--bgcolor_light80: color-mix(in oklab, var(--bgcolor_light) 80%, transparent);
	--bgcolor_light90: color-mix(in oklab, var(--bgcolor_light) 90%, transparent);

	/* headcolor α-steps */
	--headcolor10: color-mix(in oklab, var(--headcolor) 10%, transparent);
	--headcolor20: color-mix(in oklab, var(--headcolor) 20%, transparent);
	--headcolor30: color-mix(in oklab, var(--headcolor) 30%, transparent);
	--headcolor40: color-mix(in oklab, var(--headcolor) 40%, transparent);
	--headcolor50: color-mix(in oklab, var(--headcolor) 50%, transparent);
	--headcolor60: color-mix(in oklab, var(--headcolor) 60%, transparent);
	--headcolor70: color-mix(in oklab, var(--headcolor) 70%, transparent);
	--headcolor80: color-mix(in oklab, var(--headcolor) 80%, transparent);
	--headcolor90: color-mix(in oklab, var(--headcolor) 90%, transparent);

	/* accents α-steps */
	--accents10: color-mix(in oklab, var(--color_accents) 10%, transparent);
	--accents20: color-mix(in oklab, var(--color_accents) 20%, transparent);
	--accents30: color-mix(in oklab, var(--color_accents) 30%, transparent);
	--accents40: color-mix(in oklab, var(--color_accents) 40%, transparent);
	--accents50: color-mix(in oklab, var(--color_accents) 50%, transparent);
	--accents60: color-mix(in oklab, var(--color_accents) 60%, transparent);
	--accents70: color-mix(in oklab, var(--color_accents) 70%, transparent);
	--accents80: color-mix(in oklab, var(--color_accents) 80%, transparent);
	--accents90: color-mix(in oklab, var(--color_accents) 90%, transparent);

	/* textcolor α-steps (handig voor borders/overlays) */
	--textcolor10: color-mix(in oklab, var(--textcolor) 10%, transparent);
	--textcolor20: color-mix(in oklab, var(--textcolor) 20%, transparent);
	--textcolor30: color-mix(in oklab, var(--textcolor) 30%, transparent);
	--textcolor40: color-mix(in oklab, var(--textcolor) 40%, transparent);
	--textcolor50: color-mix(in oklab, var(--textcolor) 50%, transparent);
	--textcolor60: color-mix(in oklab, var(--textcolor) 60%, transparent);
	--textcolor70: color-mix(in oklab, var(--textcolor) 70%, transparent);
	--textcolor80: color-mix(in oklab, var(--textcolor) 80%, transparent);
	--textcolor90: color-mix(in oklab, var(--textcolor) 90%, transparent);
}