@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');

:root { 
   --stdFont: 'Source Sans Pro', Tahoma, Helvetica, sans-serif;
   --titleFont: 'Poppins', Tahoma, Helvetica, sans-serif;
}

@media (prefers-color-scheme: light) {
   :root {
      --blackRGB: 62,62,61;
      --whiteRGB: 244,244,233;
      --redRGB: 217,99,91;
      --blueRGB: 75,166,191;
      --yellowRGB: 242,218,95;
      --whiteRGB-std: 250,250,252;
      --blackRGB-std: 31,31,30;
      --primaryColor:75,166,191;
      --error:var(--redRGB);
   }
}

@media (prefers-color-scheme: dark) {
   :root {
      --whiteRGB: 62,62,61;
      --redRGB: 217,99,91;
      --blueRGB: 75,166,191;
      --yellowRGB: 236,201,24;  /* 242,218,95 = hsl(50deg 85% 66%) => hsl(50deg 85% 51%) = 236,201,24*/
      --blackRGB: 244,244,233;

      --blackRGB-std: 171,178,191;
      --whiteRGB-std: 35,39,46;

      --primaryColor:56,136,159; /*75,166,191 = hsl(193deg 48% 52%) => hsl(193deg 48% 42%) = 56,136,159*/
      --error:var(--redRGB);
   }

   #logoCorecyclage > svg > #green { fill:none; }
   #logoCorecyclage > svg > #yellow { fill:none; }
   #logoCorecyclage > svg > #red { fill:none; }
   #logoCorecyclage > svg > [fill='#000000'] { fill:#f4f4e9; }
   #logoCorecyclage { opacity:0.38; }

   header, .appBar *, .installApp * { color:rgb(var(--blackRGB)); }
   header.installApp > div > #logoDiag { color:rgb(var(--yellowRGB)); }
   header.locationsList { background-color:rgba(var(--blackRGB-std),0.2); }
   .card { background-color:rgba(var(--blackRGB-std),0.2); }
   input { background-color:rgb(var(--whiteRGB-std)); }
   #wrapperSelection { background-color:rgba(var(--blackRGB-std),0.3); }
   .sectionTab > .titleSection { background-color:rgba(var(--blackRGB-std),0.15); }
   .overlayMenu, .overlay { background-color:rgba(var(--whiteRGB-std), 0.72); box-shadow:10000px 10000px rgba(var(--blackRGB-std),0.2) inset; }
   .bottomSheet, .bottomSheet.expanded { box-shadow:10000px 10000px rgba(var(--blackRGB-std),0.2) inset, var(--boxShadow_z3); }
   button.action_ext:disabled, button.action_ext.disabled { background-color:rgba(var(--blackRGB-std),0.3); }
   button.textblue { font-weight:700!important; }
   .action_ext.defaultColor, .action.defaultColor, .btnImg, .itemTXT, .btnMinusPlus { background-color:rgba(var(--blackRGB-std),0.1); }
   #saveDataSheet { margin-bottom:8px; }
   input[role=switch]::before { background-color:rgba(var(--blackRGB-std), 0.2); }
}