:root {
  --dx-primary: #3b71ca;
  --dx-primary-rgb: 59, 113, 202;
  --dx-primary-hover: #386bc0;
  --dx-primary-active: #2f5aa2;

  --dx-secondary: #9fa6b2;
  --dx-secondary-rgb: 159, 166, 178;
  --dx-secondary-hover: #adb3be;

  --dx-success: #14a44d;
  --dx-success-rgb: 20, 164, 77;
  --dx-success-hover: #37b268;

  --dx-danger: #dc4c64;
  --dx-danger-rgb: 220, 76, 100;
  --dx-danger-hover: #e1677b;

  --dx-info: #54b4d3;
  --dx-info-rgb: 84, 180, 211;
  --dx-info-hover: #6ebfda;

  --dx-warning: #e4a11b;
  --dx-light: #fbfbfb;
  --dx-light-rgb: 251, 251, 251;
  --dx-dark: #332d2d;
  --dx-dark-rgb: 51, 45, 45;

  --dx-danger-fg: #c0392b;               

  --dx-neutral-border: #7f878f;
  --dx-neutral-fg: #5c636a;              

  --dx-primary-tonal-bg: #d8e3f4;        
  --dx-primary-tonal-bg-hover: #c8d7f0;
  --dx-primary-tonal-fg: #274b87;        
  --dx-primary-tonal-border: #3b71ca;    

  --dx-font-family: 'Roboto', sans-serif;
  --dx-font-size: 1rem;
  --dx-font-weight: 400;
  --dx-line-height: 1.6;
  --dx-body-color: #4f4f4f;
  --dx-body-bg: #fff;
  --dx-link-color: #3b71ca;          
  --dx-link-hover-color: #386bc0;    

  --dx-border-color: #bdbdbd;              
  --dx-border-color-subtle: #e0e0e0;       
  --dx-border-color-translucent: rgba(0, 0, 0, 0.175);
  --dx-border-radius: 0.25rem;
  --dx-border-radius-lg: 0.5rem;

  --dx-input-padding-y: 0.375rem;
  --dx-input-padding-x: 0.75rem;
  --dx-input-padding-y-sm: 0.25rem;
  --dx-input-padding-x-sm: 0.5rem;
  --dx-input-font-size-sm: 0.775rem;
  --dx-input-line-height-sm: 1.5;
  --dx-input-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  --dx-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23000' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
  --dx-select-arrow-size: 8px 5px;
  --dx-select-arrow-size-sm: 7px 4px;

  --dx-navbar-clearance: 3.75rem;   

  --dx-gutter-x: 1.5rem;
  --dx-gutter-y: 0;

  --dx-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --dx-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --dx-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}