:root{
  
  --s1:#4E76E8;
  --s2:#8468EC;
  --s3:#D66FC0;
  
  --s4:#3F8AD9;
  --s5:#A78BE8;
  --s6:#17a06b;
}

html[data-theme="dark"]{
  
  --s4:#5FA3E4;
  --s5:#B9A6F2;
  --s6:#5FD6A4;
}


@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --s4:#5FA3E4;
    --s5:#B9A6F2;
    --s6:#5FD6A4;
  }
}


:root{
  
  --cy:var(--s1);
  --pu:var(--s2);
  --pk:var(--s3);
  --gr:var(--s6);
  
  --violet:var(--s1);
  --mint:var(--s4);
  --rose:var(--s2);
  --sky:var(--s4);
  --coral:var(--s5);
}


html::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:2147483000;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:180px 180px;opacity:.24;mix-blend-mode:multiply}
html[data-theme="dark"]::after{opacity:.33;mix-blend-mode:overlay}
@media (prefers-color-scheme: dark){html:not([data-theme="light"])::after{opacity:.33;mix-blend-mode:overlay}}