@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root {
  --font-scale:1; font-style:normal; font-optical-sizing:auto;
  --font-family:"Fira Sans",system-ui,sans-serif;  --font-title-family:"Poppins","Fira Sans",system-ui,sans-serif;

  /* ===============----->>>   palette colors   <<<-----=============== */
    --body-bg:#626468;      --body-bg-80:#898b8e;
    --on-body:#ffffff;      --on-body-80:#cccccc;   --on-body-48:#7a7a7a;  --on-body-38:#616161;     --on-body-22:#383838;   --on-body-16:#292929;
    --on-container:#ffffff; --on-container-80:#cccccc; --on-container-48:#7a7a7a;   --on-container-38:#616161;    --on-container-22:#383838;    --on-container-16:#292929;    --on-container-12:#1f1f1f;  --on-container-8:#141414;
    --container-bg:black;   --container-bg-48:#f9f9f4;  
    
    --yellow:#f2da5f;       --yellow-38:#faf1c2;   --yellow-24:#fcf6d9;    --yellow-22:#fcf7dc;    --yellow-16:#fdf9e5;
    --green:#7cb496;        --green-38:#cde2d7;    --green-24:#e0ede6;     --green-22:#e2efe8;     --green-16:#eaf3ee;
    --red:#d8635b;          --red-38:#f0c4c1;      --red-24:#f6dad8;       --red-22:#f6dddb;       --red-16:#f9e6e5;       --red-12:#faeceb;     --red-08:#fcf3f2;
    --blue:#4ba6bf;         --blue-38:#4ba6bf;     --blue-24:#d4eaf0;      --blue-22:#d7ebf1;      --blue-16:#e2f1f5;
    --error:var(--red);       --on-color:#ffffff;
    --btn-color:#e30613;    --on-btn:#ffffff;     --btn-fab-color:#e30613;      --on-btn-fab:#ffffff;
  /* -------------------------------------------------------------------------- */
}