:root {
  --logo-color-symbol:                #5BB3B0;
  --logo-color-type:                  #333333;

  // Base colors
  --color-black:                      #000000;
  --color-white:                      #FFFFFF;

  --color-contrast-0:                 #FFFFFF;
  --color-contrast-2:                 #F2F2F6;
  --color-contrast-5:                 #EDEDF2;
  --color-contrast-7:                 #E6E6EB;
  --color-contrast-10:                #E1E1E6;
  --color-contrast-15:                #D4D4D9;
  --color-contrast-20:                #C8C8CC;
  --color-contrast-30:                #AFAFB3;
  --color-contrast-40:                #969699;
  --color-contrast-50:                #7D7D80;
  --color-contrast-60:                #646466;
  --color-contrast-70:                #4B4B4C;
  --color-contrast-78:                #383838;
  --color-contrast-80:                #333333;
  --color-contrast-90:                #19191A;
  --color-contrast-100:               #000000;

  // Primary colors
  --color-primary:                    #5BB3B0;
  --color-primary-transparent:        #EEF6F5;
  --color-primary-ultralight:         #CEE5E3;
  --color-primary-light:              #62BAB7;
  --color-primary-dark:               #53A09C;
  --color-primary-contrast:           #FFFFFF;

  --color-warning:                    #F5C21D;
  --color-warning-ultralight:         #F5ECCE;
  --color-warning-dark:               #D4A714;
  --color-warning-contrast:           #323233;

  --color-critical:                   #E13C5A;
  --color-critical-ultralight:        #F7CED6;
  --color-critical-dark:              #BF334D;
  --color-critical-contrast:          #FFFFFF;

  --color-positive:                   #5BB27E;

  // State colors
  --color-error:                      var(--color-critical);
  --color-success:                    var(--color-primary);

  --color-border:                     var(--color-contrast-10);
  --color-border-dark:                var(--color-contrast-15);
  --color-border-light:               var(--color-contrast-2);
  --color-link:                       var(--color-primary-dark);

  // Other colors
  --color-accent:                     #3E43B9;
  --color-accent-ultralight:          #DBDCF6;
  --color-accent-dark:                #383CA7;

  // Buttons
  --btn-color:                        var(--color-contrast-100);
  --btn-color-hover:                  var(--color-contrast-80);
  --btn-color-active:                 var(--color-contrast-15);
  --btn-color-focus:                  var(--btn-color-hover);
  --btn-color-disabled:               var(--color-contrast-40);
  --btn-color-shadow:                 var(--color-contrast-15);
  --btn-color-contrast:               var(--color-contrast-0);

  --btn-icon-color-focus:             var(--color-contrast-5);

  // Forms
  --field-bg:                         var(--color-contrast-2);
  --field-bg-hover:                   var(--color-contrast-5);
  --field-bg-disabled:                var(--color-contrast-10);
  --field-label-color:                var(--color-contrast-40);
  --field-label-color-disabled:       var(--color-contrast-40);
  --field-value-color:                var(--color-contrast-100);
  --field-value-color-disabled:       var(--color-contrast-60);
  --field-invalid-bg:                 var(--color-critical-ultralight);
  --field-icon-color:                 var(--field-value-color);
  --field-icon-disable-color:         var(--field-value-disabled);

  // Select
  --select-color-hover:               var(--color-contrast-2);
  --select-arrow-disabled:            var(--color-contrast-40);

  // Checkbox & Radio
  --checkRadioShadow:                 none;
  --checkRadioBackground:             var(--color-contrast-0);
  --checkRadioBackgroundCheck:        var(--color-primary);
  --checkRadioBackgroundDisabled:     var(--color-contrast-10);

  --checkRadioBorderColor:            var(--color-contrast-10);
  --checkRadioBorderColorFocus:       var(--color-primary);
  --checkRadioBorderColorHover:       var(--color-primary);
  --checkRadioBorderColorCheck:       var(--color-primary);

  --checkRadioMarkColor:              var(--color-primary-contrast);
  --checkRadioMarkColorDisabled:      var(--color-contrast-0);

  --checkRadioLabelDisabled:          var(--color-contrast-40);

  // Accounts & Cards
  --account-color:                       var(--color-primary-transparent);
  --account-color-hover:                 var(--color-primary-ultralight);
  --account-color-contrast:              var(--color-black);

  --card-color-debit:                    var(--color-primary);
  --card-color-debit-hover:              var(--color-primary-dark);
  --card-color-debit-contrast:           var(--color-white);
  --card-color-debit-pattern:            var(--color-primary-light);

  --card-color-black:                    var(--color-contrast-80);
  --card-color-black-hover:              var(--color-contrast-90);
  --card-color-black-contrast:           var(--color-white);
  --card-color-black-pattern:            var(--color-contrast-78);

  --card-color-virtual:                  var(--color-contrast-5);
  --card-color-virtual-hover:            var(--color-contrast-10);
  --card-color-virtual-contrast:         var(--color-black);
  --card-color-virtual-pattern:          var(--color-contrast-7);
}

/*
@media (prefers-color-scheme: dark) {
  :root {

  }
}*/