/**!
 * vars
 *
 * @version 0.1.0  21.12.2018
 * @author R. Serradeil, WebMechanic.biz
 */
/**
 * FF31/FFa63, CHR43/CHRa70, SF9.1, OP36, ED16, SI5
 * Not: MSIE, OPmini (2.02%),BB
 * ED15(0.05%) Nested calculations are not computed and are ignored; animations
 *       with vars crash the page; vars not applicable to generated content
 * @link https://caniuse.com/#feat=css-variables
 */
:root {
    font-size:16px;
    --fs:1rem;
    --fss: calc(var(--fs) * .875);
    --gr:1.618; --gr2:.62; --gr3:.81;

    /* font-size scale */
    --h1:calc(var(--fs) * 2.618); /* 0.327 */
    --h2:calc(var(--fs) * 2.291); /* 0.673 */
    --h3:calc(var(--fs) * 1.618); /* 0.202 */
    --h4:calc(var(--fs) * 1.416); /* 0.416 */
    --h5:var(--fs) ;

    /* [WIP] line-height scale */
    line-height:initial;
    --l1:var(--gr);
    --l2:1.55;
    --l3:1.42;
    --l4:1.0;
    --l5:1.0;

    /* [WIP] vertical margin scale in EM */
    --mv1:0.618em;
    --mv2:0.875em;
    --mv3:1.416em;
    --mv4:1.618em;
    --mv5:2.291em;
}

body {--fs:inherit; --lh:1; --gr:inherit;}

/* http://paletton.com/#uid=23v0u0k++nzZCI4+Wtg+Yi7+PbE */
:root {
    --hue:0;--sat:0%;--lum:50%;
    --txtcolor :#004A78;    /* enzianblau RAL 5010 */
    --txtcolor-inv:#fafafa; /* calcit - text invers - btn-secondary-text-color */
    --txtcompl :#BC6900;    /* complementary */

    --lines:hsla(202,100%,24%,.85); /* panel outline et all */
    --hdbg: hsla(202,100%,24%,.85); /* header+headline background + white text */
    --bdbg: hsla(202,100%,24%,.85); /* textpanel dunkl wenn es über einem bild liegt */
    --bdbginv:hsla(0,0%,98%,.75);   /* textpanel hell  wenn es über einem bild liegt */
    --bodybg:linear-gradient(135deg, hsl(210,100%,14%) 40%, hsl(202,100%,24%));
    --imgbg: linear-gradient(135deg, hsl(202,100%,24%) 40%, hsl(210,100%,14%));

    /* ..brand-col .brand-1 .brand-4 */
    --marineart:     #004A78; /* ~ hsl(202,100%,24%) enzianblau RAL 5010 */
	--marineart-dark:#00243B; /* ~ 4 dark   */
	--marineart-med :#005A95; /* ~ 3 medium */
	--marineart-lite:#017AC9; /* ~ 1 light - buttons */
    --complementary :#BC6900;

    --calcmix  :#ef4023; /* orangebraun */
    --marinphos:#8c301d; /* kastanie    */
    --flakes   :#b56112; /* ocker       */
    --algenexit:#eda221; /* dunkelgold  */
    --halogene :#fff200; /* gelb        */
    --magicfood:#84BD56; /* hellgrün    */
    --magnesium:#00a76d; /* grün        */
    --floras   :#004B44; /* petrolgrün  */
    --filtrator:#55C5D0; /* eisblau     */
    --carbonat :#00aeef; /* hellblau    */
    --strontium:#005AAA; /* blau        */
    --aquaclean:#942972; /* violett     */
    --elements :#ed1651; /* rot         */
    --calcium  :#e9e9e9; /* hellgrau    */
    --calcit   :#fafafa; /* weißgrau - btn-secondary-text-color - `txtcolor-inv` */
    --carbon   :#000000; /* schwarz     */
    --oceandry :#000080; /* navy        */
}

/* Farben der Pflegeprodukte -- RGB, HSL, INT parseInt(hexval, 16), HSB */
.brand-col,
.marineart      {--hue:202; --sat: 79%; --lum:24%;} /* rgb(  0, 79,124)  hsl( 203,100%,24% ) INT:    102500 HSB: 202,100,47 */
.brand-4,
.marineart.dark {--lum:10.9%;}
.brand-1,
.marineart.lite {--lum:37.1%;}

.brand-scnd-1 { color:rgb(255,188,0) }
.brand-scnd-2 { color:rgb(233,172,0) }
.brand-scnd-0 { color:rgb(188,139,0) }	/* #BC8B00 Secondary color (mustardy) */
.brand-scnd-3 { color:rgb(144,107,0) }
.brand-scnd-4 { color:rgb( 93, 69,0) }

.brand-comp-1 { color:rgb(255,142,0) }
.brand-comp-2 { color:rgb(233,130,0) }
.brand-comp-0 { color:rgb(188,105,0) }	/* #BC6900 Complementary color (orange) ~ flakes */
.brand-comp-3 { color:rgb(144, 81,0) }
.brand-comp-4 { color:rgb( 93, 52,0) }


/* let rgb2int = function(r,g,b){return (r<<16) + (g<<8) + b} */
 .calcmix   { --hue:  9; --sat: 86%; --lum:54%; } /* rgb(239, 64, 35)  hsl(  8.5, 86.4%, 53.7%)  HSB:   9, 86,93 */
 .marinphos { --hue: 11; --sat: 66%; --lum:33%; } /* rgb(140, 48, 29)  hsl( 10.3, 65.7%, 33.1%)  */
 .flakes    { --hue: 29; --sat: 82%; --lum:39%; } /* rgb(181, 97, 18)  hsl( 29.1, 81.9%, 39%)    */
 .algenexit { --hue: 38; --sat: 85%; --lum:53%; } /* rgb(237,162, 33)  hsl( 37.9, 85%, 52.9%)    */
 .halogene  { --hue: 57; --sat:100%; --lum:50%; } /* rgb(255,242,  0)  hsl( 56.9, 100%, 50%)     */
 .magicfood { --hue: 93; --sat: 44%; --lum:54%; } /* rgb(132,189, 86)  hsl( 93.2, 43.8%, 53.9%)  */
 .magnesium { --hue:159; --sat:100%; --lum:33%; } /* rgb(  0,167,109)  hsl(159.2, 100%, 32.7%)   */
 .floras    { --hue:174; --sat:100%; --lum:15%; } /* rgb(  0, 75, 68)  hsl(174.4, 100%, 14.7%)   */
 .filtrator { --hue:185; --sat:100%; --lum:70%; } /* rgb( 85,197,208)  hsl(185.4, 56.7%, 57.5%)  */
 .carbonat  { --hue:196; --sat:100%; --lum:47%; } /* rgb(  0,174,239)  hsl(196.3, 100%, 46.9%)   */
 .strontium { --hue:208; --sat:100%; --lum:33%; } /* rgb(  0, 90,170)  hsl(208.2, 100%, 33.3%)   */
 .aquaclean { --hue:319; --sat: 56%; --lum:37%; } /* rgb(148, 41,114)  hsl(319.1, 56.6%, 37.1%)  */
 .elements  { --hue:344; --sat: 86%; --lum:51%; } /* rgb(237, 22, 81)  hsl(343.5, 85.7%, 50.8%)  */
 .calcium   { --hue:  0; --sat:  0%; --lum:91%; } /* rgb(233,233,233)  hsl(0, 0%, 91.4%)         */
 .calcit    { --hue:  0; --sat:  0%; --lum:98%; } /* rgb(250,250,250)  hsl(0, 0%, 98%)           */
 .carbon    { --hue:  0; --sat:  0%; --lum: 0%; } /* rgb(  0,  0,  0)  hsl(0, 0%, 0%)            */
 .oceandry  { --hue:  0; --sat:  0%; --lum: 0%; display:none; } /* TBD */


/* screen size breakpoints */
@media screen {
    :root{--max-content:78.75em; --max-screen:90em;}
    @media (max-width:20em)    { :root{--screen-em:20em; --scale:'xs';} }
    @media (max-width:30em)    { :root{--screen-em:30em; --scale:'s';} }
    @media (max-width:48em)    { :root{--screen-em:48em; --scale:'m';} }
    @media (max-width:64em)    { :root{--screen-em:64em; --scale:'ml';} }
    @media (max-width:78.75em) { :root{--screen-em:78.75em; --scale:'xl';} }
    @media (max-width:90em)    { :root{--screen-em:90em; --scale:'xxl';} }

    @media (min-width:320px)   { :root{--screen-px: 320px} /* ~ 20em */ }
    @media (min-width:480px)   { :root{--screen-px: 480px} /* ~ 30em */ }
    @media (min-width:768px)   { :root{--screen-px: 768px} /* ~ 48em */ }
    @media (min-width:1024px)  { :root{--screen-px:1024px} /* ~ 64em */ }
    @media (min-width:1260px)  { :root{--screen-px:1260px} /* ~ 78em */ }
    @media (min-width:1344px)  { :root{--screen-px:1344px} /* ~ 84em */ }
    @media (min-width:1440px)  { :root{--screen-px:1440px} /* ~ 90em */ }
}

/* .eof */