/*  Tenant CSS
	may have any css modifications
	main variable definitions, for light and dark mode: 
	--background-color
	--font-color
	--accent-color
	--selection-color
	--font-family

*/

/* tenant color definitions */ 
:root{
	--red:        #833228;  /* https://gradients.app/de/color/833228 */
	    --red-50:     #FDFAF9;
	    --red-100:    #F7E8E6;
	    --red-200:    #EBC4BF;
	    --red-300:    #DF9F98;
	    --red-400:    #D37B71;
	    --red-500:    #C85749;
	    --red-600:    #AA4134;
	    --red-700:    #833228; /* std */
	    --red-800:    #5C231C;
	    --red-900:    #351410;
	    --red-w1:     #9F5A4E;
	    --red-w2:     #BA8177;
	    --red-w3:     #D3AAA2;
	    --red-w4:     #EAD4D0;
		--red-k1:     #682A21;
		--red-k2:     #4F221B;
		--red-k3:     #361915;
		--red-k4:     #20110C;
	--green:      #298533;  /* https://gradients.app/de/color/298533 */
	    --green-50:   #FCFEFC;
	    --green-100:  #E8F8EA;
	    --green-200:  #C1ECC6;
	    --green-300:  #9AE0A2;
	    --green-400:  #73D47E;
	    --green-500:  #4CC85A;
	    --green-600:  #35AC42;
	    --green-700:  #298533; /* std */
	    --green-800:  #1D5E24;
	    --green-900:  #113715;
	    --green-w1:   #5A9D5A;
	    --green-w2:   #84B681;
	    --green-w3:   #ADCEAA;
	    --green-w4:   #D6E6D4;
		--green-k1:   #25692B;
		--green-k2:   #204F22;
		--green-k3:   #19351A;
		--green-k4:   #121E10;
	--blue:       #332985  /* https://gradients.app/de/color/332985 */ 
	    --blue-50:    #FCFCFE;
	    --blue-100:   #EAE8F8;
	    --blue-200:   #C6C1EC;
	    --blue-300:   #A29AE0;
	    --blue-400:   #7E73D4;
	    --blue-500:   #5A4CC8;
	    --blue-600:   #4235AC;
	    --blue-700:   #332985; /* std */
	    --blue-800:   #241D5E;
	    --blue-900:   #151137;
        --blue-w1:    #604F9D;
        --blue-w2:    #8978B6;
        --blue-w3:    #B0A3CE;
        --blue-w4:    #D7D0E6;
		--blue-k1:    #2C2269;
		--blue-k2:    #241C4F;
		--blue-k3:    #1C1535;
		--blue-k4:    #130D1E;
	--yellow:       #CDC72F  /* https://gradients.app/de/color/CDC72F */ 
	    --yellow-50:  #FAF9E8;
	    --yellow-100: #F5F4D3;
	    --yellow-200: #EBE9AA;
	    --yellow-300: #E2DE80;
	    --yellow-400: #D8D357;
	    --yellow-500: #CDC72F;
	    --yellow-600: #A49F25;
	    --yellow-700: #7A761C;
	    --yellow-800: #514E12;
	    --yellow-900: #272609;
        --yellow-w1:  #DAD260;
        --yellow-w2:  #E6DD89;
        --yellow-w3:  #F0E8B0;
        --yellow-w4:  #F8F3D7;
		--yellow-k1:  #A19C2A;
		--yellow-k2:  #767223;
		--yellow-k3:  #4F4B1C;
		--yellow-k4:  #2A2813;
	--paper: #C6BFA3  /* https://gradients.app/de/color/C6BFA3 */
	    --paper-50:   #F7F6F2;
	    --paper-100:  #EDEBE2;
	    --paper-200:  #DAD5C2;
	    --paper-300:  #C6BFA3; /* std */
	    --paper-400:  #B2A984;
	    --paper-500:  #9F9364;
	    --paper-600:  #807750;
	    --paper-700:  #615A3C;
	    --paper-800:  #413C29;
	    --paper-900:  #221F15;
        --paper-w1:   #D1CCB5;
        --paper-w2:   #DDD8C7;
        --paper-w3:   #E8E5D9;
        --paper-w4:   #F4F2EC; /* light background-color */
		--paper-k1:   #9B9580;
		--paper-k2:   #726E5F;
		--paper-k3:   #4B493F;
		--paper-k4:   #282722;
        --paper-k00:  #C6BFA3; /* https://gradients.app/de/shades/C6BFA3 */
        --paper-k01:  #BAB499;
        --paper-k02:  #AFA990;
        --paper-k03:  #A39D86;
        --paper-k04:  #97927D;
        --paper-k05:  #8C8773;
        --paper-k06:  #807C69;
        --paper-k07:  #747060;
        --paper-k08:  #696556;
        --paper-k09:  #5D5A4D;
        --paper-k10:  #524F43;
        --paper-k11:  #46433A;
        --paper-k12:  #3A3830;
        --paper-k13:  #2F2D26;
        --paper-k14:  #23221D;
        --paper-k15:  #171613; 
        --paper-k15g: #1d1c19; /* dark background color; reduced saturation */
        --paper-k16:  #0C0B0A; /* light font color */

	--background-color: var(--paper-w4);
	--font-color: var(--paper-k16);  /* dark tint; alternate var(--paper-w4) */
	--text-color: var(--font-color);
  	--text-color-bright: var(--paper-k16);
  	--text-color-dark: var(--paper-w4); /* bright tint; define dark color here */
  	--title-color: var(--green-w1);
  	--tag-inactive-background: var(--paper-200);
  	--tag-inactive-text: var(--paper-k10);
  	--tag-active-backgound: var();
  	--toast_background: var(--paper-w2);

	--accent-color: var(--green);
	--selection-color: var(--green);

	--tag-icons: url("/assets/img/icons.svg");
}
@media (prefers-color-scheme: dark) { 
	:root {
		--background-color: var(--paper-k15g);
		--font-color: var(--text-color-dark);  /* alternate var(--paper-w4) */
		--accent-color: var(--green-w1);
		--title-color: var(--green-w2);
		--tag-inactive-background: var(--paper-k12);
		--tag-inactive-text: var(--green-w3);
		/*--tag-active-backgound var();*/
	}
}
:selection {
	background: var(--selection-color); /* WebKit/Blink Browsers */
}
::-moz-selection {
	background: var(--selection-color); /* Gecko Browsers */
}

html, body {
	font-size: var(--font-size, 1rem);
	line-height: var(--line-height);
	color: var(--font-color);
	background-color: var(--background-color);

	/* Variable fonts: make ; */
	font-variation-settings: "wdth" 84;
    letter-spacing: 0.018em;

	/* hyphenation settings */
	-epub-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	/* https://css-tricks.com/almanac/properties/h/hyphenate-limit-chars/#:~:text=As%20their%20names%20imply%2C%20%2Dwebkit,of%20characters%20after%20the%20hyphen. */
	-webkit-hyphenate-limit-before: 4;  /* For Safari */
	-webkit-hyphenate-limit-after: 5;   /* For Safari */
	-ms-hyphenate-limit-chars: 10 3 4;
	hyphenate-limit-chars: 10 3 4;
	-webkit-hyphenate-limit-lines: 3;   /* For Safari */
}
h1, h2, h3, h4, h5, h6, .versal {
	letter-spacing: 0.1em;
}
main { h1, h2, h3 { color: var(--title-color); } }
button, input, optgroup, select, textarea {}

i.icon {
  --row: 0;
  --col: 0;
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-image: url("/assets/img/icons.svg");
  background-size: 1600% 1600%; /* 16×16 Raster */
  background-repeat: no-repeat;
  background-position: 
    calc( var(--col) * 100% / 15)
    calc( var(--row) * 100% / 15);
  vertical-align: middle;
  margin-top: -0.2em;
  margin-right: 0.1em;

  &.bio { --col: 0; --row: 0; }
  &.demeter { --col: 1; --row: 0; }
  &.vegetarisch { --col: 7; --row: 0; }
  &.vegan { --col: 6; --row: 0; }
  &.no_milk { --col: 4; --row: 0; }
  &.no_gluten { --col: 5; --row: 0; }
  &.regional { --col: 0; --row: 1; }
  &.dv { --col: 0; --row: 2; }
  &.aktion { --col: 1; --row: 1; }
  &.new { --col: 3; --row: 2; }


}

#table.products tr.category-separator.level-1 { background-color: var(--title-color); }
@media (prefers-color-scheme: dark) { 

}