:root {
/*
OKLCH
L - lightness    0 - 100 %
C - chroma       0 - 0.4
H - hue          0 - 360
*/





 /* .txt-colour svg {fill:currentColor;} */

 --hB:210; /* SAPPHIRE s85% l39% */
 --hA:60; /* SAGE */
 --hC:25; /* BRONZE */
 --hD:39; /* GOLD */



 --sHigher:92%;--sHigh:86%;--sMidHigh:78%;
 --sMid:68%;--sMidNeut:56%;--sNeut:44%;

 --snHighest:32%;--snHigher:30%;--snHigh:27%;
 --snMidHigh:24%;--snMid:20%;--snMidLow:16%;
 --snLow:13%;--snLower:10%;--snLowest:8%;

/*
 --white:90%;
 --lighter:82%;
 --light:74%;
 --midlight:66%;
 --neutral:58%;
 --middark:50%;
 --dark:42%;
 --darker:27%;
 --black:12%;
*/

--white:hsl(51 50% 90%);
--lighter:hsl(53 30% 82%);
--light:hsl(55 21% 74%);
--midlight:hsl(58 16% 66%);
--neutral:hsl(60 10% 58%);
--middark:hsl(60 11% 50%);
--dark:hsl(60 12% 42%);
--darker:hsl(60 18% 27%);
--black:hsl(60 15% 12%);

--awhite:hsl(52, 50%, 90%,);
--alighter:hsl(54, 40%, 82%,);
--alight:hsl(55, 7%, 74%,);
--amidlight:hsl(58, 9%, 66%,);
--aneutral:hsl(60, 10%, 58%,);
--amiddark:hsl(60, 11%, 50%,);
--adark:hsl(60, 12%, 42%,);
--adarker:hsl(62, 13%, 27%,);
--ablack:hsl(65, 15%, 12%,);

--COLOUR:hsl(var(hA) var(--snLower) var(--dark));
--aCOLOUR:hsla(var(hA), var(--snLower), var(--dark),);

--gold-light:hsl(39 21% 74%);
/* NEW HSL SYSTEM
 --nH:var(--hA);
 --iS:var(--snLower);
 --nL:var(--dark);

 --h-brightness:calc(0.5 + 0.5 * cos(var(--nH) *1deg - 60deg));
 --l-diff:calc(var(--nL) - 50%);
 --s-boost:calc(var(--l-diff) * var(--hue-brightness) * 0.8);

 --nS:calc(var(--iS) + var(--s-boost));

 --COLOUR:var(--nH), var(--nS), var(--nL);
/* modify in main.css > "colour" */



 /* SIZING */
 --baseFontSize:13.6px;
 --spacer:1rem;
 --maxwidth:900px;
 --s-art-w:500px;
 --s-navLeft:14.3%;
 /* outline*/
 --outline:3px;
 /* SHAPING */
 --bRadius-sm:12px;
 /* SHADING */
 --shadow:0px .25px 18px 0px rgba(0,0,0,0.1);
 --shadow-flat:0px .25px 3px 1px rgba(0,0,0,0.3);
 --shadow-top-flat:0px -1px 3px 1px rgba(0,0,0,0.3);
 /*ANIMATION*/
 --ease-in-out:ease-in-out 0.3s;
 --ease-in-out-long:ease-in-out 1s;
 /*DEV*/
 --viewOutline:1px solid teal;
}


/* --- */


body {
 --nH:var(--hA);
 --iS:var(--snLower);
 --nL:var(--dark);

 --h-brightness:calc(0.5 + 0.5 * cos(var(--nH) *1deg - 60deg));
 --l-diff:calc(var(--nL) - 50%);
 --s-boost:calc(var(--l-diff) * var(--hue-brightness) * 0.8);

 --nS:calc(var(--iS) + var(--s-boost));

 --COLOUR:var(--nH), var(--nS), var(--nL);
 --aCOLOUR:(var(--nH), var(--nS), var(--nL),);
}

/*
background-colour
text-colour
border-colour
*/