:root, [data-theme=default] {
    --app-sidebar-backgound: #F5F2FF; 
    --app-sidebar-minimal-backgound: hsl(var(--color-primary-h), 33%, 98%);
    --app-sidebar-color: var(--color-contrast-darker);
    --color-custom-background: hsl(240, 0%, 99%);

    --color-primary-darker: hsl(251, 95%, 38%);
    --color-primary-darker-h: 251;
    --color-primary-darker-s: 95%;
    --color-primary-darker-l: 398%;
    --color-primary-dark: #5833fa;
    --color-primary-dark-h: 251;
    --color-primary-dark-s: 95%;
    --color-primary-dark-l: 59%;
    --color-primary: hsl(251, 100%, 65%);
    --color-primary-h: 251;
    --color-primary-s: 100%;
    --color-primary-l: 65%;
    --color-primary-light: hsl(251, 97%, 69%);
    --color-primary-light-h: 251;
    --color-primary-light-s: 97%;
    --color-primary-light-l: 69%;
    --color-primary-lighter: hsl(251, 94%, 79%);
    --color-primary-lighter-h: 251;
    --color-primary-lighter-s: 94%;
    --color-primary-lighter-l: 79%;
    --color-accent-darker: hsl(207, 100%, 40%);
    --color-accent-darker-h: 174;
    --color-accent-darker-s: 100%;
    --color-accent-darker-l: 40%;
    --color-accent-dark: hsl(207, 100%, 55%);
    --color-accent-dark-h: 207;
    --color-accent-dark-s: 100%;
    --color-accent-dark-l: 55%;
    --color-accent: hsl(207, 100%, 65%);
    --color-accent-h: 207;
    --color-accent-s: 100%;
    --color-accent-l: 65%;
    --color-accent-light: hsl(207, 100%, 72%);
    --color-accent-light-h: 207;
    --color-accent-light-s: 100%;
    --color-accent-light-l: 72%;
    --color-accent-lighter: hsl(207, 100%, 76%);
    --color-accent-lighter-h: 207;
    --color-accent-lighter-s: 100%;
    --color-accent-lighter-l: 76%;
  }

  [data-theme=dark] {
    --app-sidebar-backgound: #3112BA;
    --app-sidebar-minimal-backgound: var(--color-bg-light);
    --color-custom-background: var(--color-bg);
    --app-sidebar-color: var(--color-white);


    --color-primary-darker: hsl(251, 95%, 38%);
    --color-primary-darker-h: 251;
    --color-primary-darker-s: 95%;
    --color-primary-darker-l: 398%;
    --color-primary-dark: hsl(251, 95%, 59%);
    --color-primary-dark-h: 251;
    --color-primary-dark-s: 95%;
    --color-primary-dark-l: 59%;
    --color-primary: hsl(251, 100%, 65%);
    --color-primary-h: 251;
    --color-primary-s: 100%;
    --color-primary-l: 65%;
    --color-primary-light: hsl(251, 97%, 69%);
    --color-primary-light-h: 251;
    --color-primary-light-s: 97%;
    --color-primary-light-l: 69%;
    --color-primary-lighter: hsl(251, 94%, 79%);
    --color-primary-lighter-h: 251;
    --color-primary-lighter-s: 94%;
    --color-primary-lighter-l: 79%;
    --color-accent-darker: hsl(207, 100%, 40%);
    --color-accent-darker-h: 174;
    --color-accent-darker-s: 100%;
    --color-accent-darker-l: 40%;
    --color-accent-dark: hsl(207, 100%, 55%);
    --color-accent-dark-h: 207;
    --color-accent-dark-s: 100%;
    --color-accent-dark-l: 55%;
    --color-accent: hsl(207, 100%, 65%);
    --color-accent-h: 207;
    --color-accent-s: 100%;
    --color-accent-l: 65%;
    --color-accent-light: hsl(207, 100%, 72%);
    --color-accent-light-h: 207;
    --color-accent-light-s: 100%;
    --color-accent-light-l: 72%;
    --color-accent-lighter: hsl(207, 100%, 76%);
    --color-accent-lighter-h: 207;
    --color-accent-lighter-s: 100%;
    --color-accent-lighter-l: 76%;
  }