:root {

  /* Color palette */
  --cs-white-100:              rgba(255, 255, 255, 1);
  --cs-white-50:               rgba(255, 255, 255, 0.5);
  --cs-white-25:               rgba(255, 255, 255, 0.25);

  --cs-neutral-50:             #EDF1F5;
  --cs-neutral-100:            #DFE6ED;
  --cs-neutral-200:            #BDCBD9;
  --cs-neutral-300:            #9FB3C6;
  --cs-neutral-400:            #8898A7;
  --cs-neutral-500:            #74808C;
  --cs-neutral-600:            #5E6770;
  --cs-neutral-700:            #4A5157;
  --cs-neutral-800:            #353A3E;
  --cs-neutral-900:            #232629;
  --cs-neutral-950:            #1A1C1E;

  --cs-blue-50:                #ECF1FF;
  --cs-blue-100:               #DCE5FD;
  --cs-blue-200:               #B6C9F8;
  --cs-blue-300:               #95B1EE;
  --cs-blue-400:               #5E96F1;
  --cs-blue-500:               #2B7CDE;
  --cs-blue-600:               #0A61B5;
  --cs-blue-700:               #00498D;
  --cs-blue-800:               #003265;
  --cs-blue-900:               #001B3C;
  --cs-blue-950:               #001129;

  --cs-cyan-50:                #E8FEF8;
  --cs-cyan-100:               #D2FCF1;
  --cs-cyan-200:               #9FF9E3;
  --cs-cyan-300:               #8BEED7;
  --cs-cyan-400:               #65CAB4;
  --cs-cyan-500:               #4BA894;
  --cs-cyan-600:               #2F8473;
  --cs-cyan-700:               #176556;
  --cs-cyan-800:               #014439;
  --cs-cyan-900:               #002720;
  --cs-cyan-950:               #001712;

  --cs-state-red:              #FF6B6C;
  --cs-state-red-light:        #FF9056;
  --cs-state-yellow-to-red:    #FFB53F;
  --cs-state-yellow:           #FFDA29;
  --cs-state-green-to-yellow:  #AAD549;
  --cs-state-green-light:      #55D168;
  --cs-state-green:            #00CC88;


  /* Color system */
  --cs-color-primary:                   var(--cs-blue-300);
  --cs-color-primary-text:              var(--cs-blue-950);
  --cs-color-primary-hover:             var(--cs-blue-200);
  --cs-color-primary-text-hover:        var(--cs-blue-950);
  --cs-color-primary-disabled:          var(--cs-neutral-100);
  --cs-color-primary-text-disabled:     var(--cs-neutral-400);

  --cs-color-secondary:                 var(--cs-blue-100);
  --cs-color-secondary-text:            var(--cs-blue-950);
  --cs-color-secondary-hover:           var(--cs-blue-50);
  --cs-color-secondary-text-hover:      var(--cs-blue-950);
  --cs-color-secondary-disabled:        var(--cs-neutral-100);
  --cs-color-secondary-text-disabled:   var(--cs-neutral-400);

  --cs-color-tertiary:                  var(--cs-cyan-300);
  --cs-color-tertiary-text:             var(--cs-cyan-950);
  --cs-color-tertiary-hover:            var(--cs-cyan-200);
  --cs-color-tertiary-text-hover:       var(--cs-cyan-950);
  --cs-color-tertiary-disabled:         var(--cs-neutral-100);
  --cs-color-tertiary-text-disabled:    var(--cs-neutral-400);

  --cs-color-quaternary:                var(--cs-cyan-100);
  --cs-color-quaternary-text:           var(--cs-cyan-950);
  --cs-color-quaternary-hover:          var(--cs-cyan-50);
  --cs-color-quaternary-text-hover:     var(--cs-cyan-950);
  --cs-color-quaternary-disabled:       var(--cs-neutral-100);
  --cs-color-quaternary-text-disabled:  var(--cs-neutral-400);

  --cs-color-ghost:                     transparent;
  --cs-color-ghost-text:                var(--cs-blue-950);
  --cs-color-ghost-hover:               var(--cs-white-50);
  --cs-color-ghost-text-hover:          var(--cs-blue-950);
  --cs-color-ghost-disabled:            transparent;
  --cs-color-ghost-text-disabled:       var(--cs-neutral-400);


  /* Button system */
  --cs-btn-padding-x-sm: 8px;
  --cs-btn-padding-x-md: 12px;
  --cs-btn-padding-x-lg: 12px;

  --cs-btn-padding-y-sm: 4px;
  --cs-btn-padding-y-md: 8px;
  --cs-btn-padding-y-lg: 8px;

  --cs-btn-spacing-sm: 8px;
  --cs-btn-spacing-md: 10px;
  --cs-btn-spacing-lg: 10px;

  --cs-btn-roundness-sm: 16px;
  --cs-btn-roundness-md: 16px;
  --cs-btn-roundness-lg: 16px;

  --cs-btn-height-sm: 32px;
  --cs-btn-height-md: 42px;
  --cs-btn-height-lg: 48px;
}

body:not(.specificity-increase#lvl1) {

  .cs-btn{
    --lcl-height: var(--cs-btn-height-md);
    --lcl-roundness: var(--cs-btn-roundness-md);
    --lcl-spacing: var(--cs-btn-spacing-md);
    --lcl-padding-x: var(--cs-btn-padding-x-md);
    --lcl-padding-y: var(--cs-btn-padding-y-md);

    --lcl-color: var(--cs-color-primary);
    --lcl-color-text: var(--cs-color-primary-text);
    --lcl-color-hover: var(--cs-color-primary-hover);
    --lcl-color-text-hover: var(--cs-color-primary-text-hover);
    --lcl-color-disabled: var(--cs-color-primary-disabled);
    --lcl-color-text-disabled: var(--cs-color-primary-text-disabled);


    height: var(--lcl-height);
    padding-inline: var(--lcl-padding-x);
    padding-block: var(--lcl-padding-y);
    border-radius: var(--lcl-roundness);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--lcl-spacing);

    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 6%;

    border: none;

    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;

    background-color: var(--lcl-color);
    color: var(--lcl-color-text);
    
    &:not(:disabled){
      cursor: pointer;
    }

    &:hover{
      background-color: var(--lcl-color-hover);
      color: var(--lcl-color-text-hover);
    }

    &:focus{
      outline: none;
    }
    
    &:disabled{
      cursor: not-allowed;
      background-color: var(--lcl-color-disabled);
      color: var(--lcl-color-text-disabled);
    }

    &.cs-sm{
      --lcl-height: var(--cs-btn-height-sm);
      --lcl-roundness: var(--cs-btn-roundness-sm);
      --lcl-spacing: var(--cs-btn-spacing-sm);
      --lcl-padding-x: var(--cs-btn-padding-x-sm);
      --lcl-padding-y: var(--cs-btn-padding-y-sm);
    }

    &.cs-lg{
      --lcl-height: var(--cs-btn-height-lg);
      --lcl-roundness: var(--cs-btn-roundness-lg);
      --lcl-spacing: var(--cs-btn-spacing-lg);
      --lcl-padding-x: var(--cs-btn-padding-x-lg);
      --lcl-padding-y: var(--cs-btn-padding-y-lg);
    }

    &.cs-secondary{
      --lcl-color: var(--cs-color-secondary);
      --lcl-color-text: var(--cs-color-secondary-text);
      --lcl-color-hover: var(--cs-color-secondary-hover);
      --lcl-color-text-hover: var(--cs-color-secondary-text-hover);
      --lcl-color-disabled: var(--cs-color-secondary-disabled);
      --lcl-color-text-disabled: var(--cs-color-secondary-text-disabled);
    }

    &.cs-tertiary{
      --lcl-color: var(--cs-color-tertiary);
      --lcl-color-text: var(--cs-color-tertiary-text);
      --lcl-color-hover: var(--cs-color-tertiary-hover);
      --lcl-color-text-hover: var(--cs-color-tertiary-text-hover);
      --lcl-color-disabled: var(--cs-color-tertiary-disabled);
      --lcl-color-text-disabled: var(--cs-color-tertiary-text-disabled);
    }

    &.cs-quaternary{
      --lcl-color: var(--cs-color-quaternary);
      --lcl-color-text: var(--cs-color-quaternary-text);
      --lcl-color-hover: var(--cs-color-quaternary-hover);
      --lcl-color-text-hover: var(--cs-color-quaternary-text-hover);
      --lcl-color-disabled: var(--cs-color-quaternary-disabled);
      --lcl-color-text-disabled: var(--cs-color-quaternary-text-disabled);
    }

    &.cs-ghost{
      --lcl-color: var(--cs-color-ghost);
      --lcl-color-text: var(--cs-color-ghost-text);
      --lcl-color-hover: var(--cs-color-ghost-hover);
      --lcl-color-text-hover: var(--cs-color-ghost-text-hover);
      --lcl-color-disabled: var(--cs-color-ghost-disabled);
      --lcl-color-text-disabled: var(--cs-color-ghost-text-disabled);
    }
  }
}

.que-shell{
  background-color: var(--cs-neutral-50) !important;
}

.que-form-group{
  padding: 16px !important;
  border-radius: 32px;
  background-color: var(--cs-white-25);

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.que-form-group-item{
  padding: 16px !important;
  border-radius: 16px;
  background-color: var(--cs-white-50);
}