/* --------------------------- */
/* Dark theme (default)        */
/* --------------------------- */
:root {
  /* Primary brand */
  /* --primary-color:     hsla(240, 100%, 50%, 1); */
  /* --primary-color:     hsla(228, 88%, 66%, 1); */
  --primary-color:     hsla(258, 88%, 66%, 1);
  --primary-hover:     hsla(258, 77%, 52%, 1);
  --primary-disabled:  hsl(222 85% 65% / 0.45);

  --secondary-color:   hsla(258, 93%, 83%, 1);
  --secondary-hover:   hsla(228, 66%, 49%, 1);

  /* UI states */
  --success:           hsl(146 55% 54%);
  --warning:           hsl(38 92% 62%);
  --error:             hsl(0 72% 64%);
  --info:              hsl(206 85% 64%);

  /* Text hierarchy */
  --text-primary:      hsl(0, 0%, 100%);
  --text-secondary:    hsla(0, 0%, 44%, 1); 
  --text-muted:        hsla(220, 13%, 91%, 1);
  --text-placeholder:  hsla(215, 20%, 65%, 1);
  --text-inverse:      hsl(222 25% 12%);
  
  /* Backgrounds */
  --bg-primary:        hsl(0, 0%, 0%);        /*primary background*/
  --bg-secondary:      hsla(0, 0%, 10%, 1);    /*hover effect negative*/
  --bg-surface:        hsla(0, 0%, 12%, 1);   /*active buttons, dashboard elements*/
  --bg-inverse:        hsla(0, 0%, 22%, 1);   /* hover effect positive*/
  --bg-overlay:        hsl(0 0% 0% / 0.6);

  /* Borders & dividers */
  /* --border:            hsla(0, 0%, 22%, 1); */
  --border-primary:    hsla(0, 0%, 22%, 1);
  --border-subtle:     hsl(222 12% 22%);
  --border-subtle-muted:     hsla(217, 33%, 17%, 1);
  --divider:           hsl(222 12% 28%);
  }