/* --------------------------- */
/* Light theme                   */
/* --------------------------- */
:root {
    /* Primary brand */
    --primary-color:     hsla(215, 94%, 80%, 1);
    /* --primary-hover:     hsla(240, 100%, 50%, 0.75); */
    --primary-hover:     hsla(258, 93%, 83%, 1);
    --primary-disabled:  hsl(222 85% 65% / 0.45);
  
    /* UI states */
    --success:           hsl(146 55% 42%);
    --warning:           hsl(38 92% 50%);
    --error:             hsl(0 72% 50%);
    --info:              hsl(206 85% 52%);
  
    /* Text hierarchy */
    --text-primary:      hsla(0, 0%, 36%, 1);
    --text-secondary:    hsl(320, 5%, 33%);
    --text-muted:        hsl(224, 8%, 48%);
    --text-inverse:      hsl(0 0% 100%);
  
    /* Backgrounds */
    /* --bg-primary:        hsl(43, 62%, 91%, 1);*/
    --bg-primary:        hsla(0, 0%, 100%, 1);
    /* --bg-primary:        rgb(164, 31, 162); */
    --bg-secondary:      hsl(210 20% 98%);
    --bg-surface:        hsl(210 20% 96%);        /* <-- middle value */
    --bg-inverse:        hsl(210, 20%, 94%);
    --bg-overlay:        hsl(222 15% 10% / 0.6);
  
    /* Borders & dividers */
    --border:            hsl(222 15% 82%);
    --border-subtle:     hsl(222 20% 90%);
    --border-subtle-muted:     rgb(220, 225, 231);
    --divider:           hsl(222 15% 80%);
  }