:root,
[data-theme="default"] {
  --color-brand-primary: #1060EA;
  --color-brand-secundary: #00C2AE;

  --app-sidebar-backgound: hsl(var(--color-primary-h), 76%, 22%);
  --app-sidebar-color: var(--color-white);
  --app-sidebar-minimal-backgound: hsl(var(--color-primary-h), 76%, 98%);
  --color-custom-background: hsl(240, 33%, 99%);

  --color-primary-darker-h: 218;
  --color-primary-darker-s: 76%;
  --color-primary-darker-l: 30%;
  --color-primary-darker: hsl(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l));
  --color-primary-dark-h: 218;
  --color-primary-dark-s: 86%;
  --color-primary-dark-l: 40%;
  --color-primary-dark: hsl(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l));
  --color-primary-h: 218;
  --color-primary-s: 87%;
  --color-primary-l: 49%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-primary-light-h: 218;
  --color-primary-light-s: 87%;
  --color-primary-light-l: 64%;
  --color-primary-light: hsl(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l));
  --color-primary-lighter-h: 218;
  --color-primary-lighter-s: 88%;
  --color-primary-lighter-l: 82%;
  --color-primary-lighter: hsl(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l));
  --color-accent-darker-h: 174;
  --color-accent-darker-s: 100%;
  --color-accent-darker-l: 26%;
  --color-accent-darker: hsl(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l));
  --color-accent-dark-h: 174;
  --color-accent-dark-s: 100%;
  --color-accent-dark-l: 32%;
  --color-accent-dark: hsl(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l));
  --color-accent-h: 174;
  --color-accent-s: 100%;
  --color-accent-l: 38%;
  --color-accent: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l));
  --color-accent-light-h: 174;
  --color-accent-light-s: 96%;
  --color-accent-light-l: 44%;
  --color-accent-light: hsl(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l));
  --color-accent-lighter-h: 174;
  --color-accent-lighter-s: 96%;
  --color-accent-lighter-l: 80%;
  --color-accent-lighter: hsl(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l));
}

[data-theme="dark"] {
  --color-brand-primary: #1060EA;
  --color-brand-secundary: #00C2AE;

  --app-sidebar-backgound: #3856D2;
  --app-sidebar-color: var(--color-white);
  --app-sidebar-minimal-backgound: var(--color-bg-light);
  --color-custom-background: var(--color-bg);
  
  --color-primary-darker-h: 218;
  --color-primary-darker-s: 76%;
  --color-primary-darker-l: 30%;
  --color-primary-darker: hsl(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l));
  --color-primary-dark-h: 218;
  --color-primary-dark-s: 86%;
  --color-primary-dark-l: 40%;
  --color-primary-dark: hsl(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l));
  --color-primary-h: 218;
  --color-primary-s: 87%;
  --color-primary-l: 49%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-primary-light-h: 218;
  --color-primary-light-s: 87%;
  --color-primary-light-l: 64%;
  --color-primary-light: hsl(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l));
  --color-primary-lighter-h: 218;
  --color-primary-lighter-s: 88%;
  --color-primary-lighter-l: 82%;
  --color-primary-lighter: hsl(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l));
  --color-accent-darker-h: 174;
  --color-accent-darker-s: 100%;
  --color-accent-darker-l: 26%;
  --color-accent-darker: hsl(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l));
  --color-accent-dark-h: 174;
  --color-accent-dark-s: 100%;
  --color-accent-dark-l: 32%;
  --color-accent-dark: hsl(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l));
  --color-accent-h: 174;
  --color-accent-s: 100%;
  --color-accent-l: 38%;
  --color-accent: hsl(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l));
  --color-accent-light-h: 174;
  --color-accent-light-s: 96%;
  --color-accent-light-l: 44%;
  --color-accent-light: hsl(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l));
  --color-accent-lighter-h: 174;
  --color-accent-lighter-s: 96%;
  --color-accent-lighter-l: 80%;
  --color-accent-lighter: hsl(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l));
}