:root {
  // Font
  --font-base:                        "Inter", sans-serif;
  --font-size-base:                   1rem; //16px

  // Font sizes
  --font-size-xxxl:                   2.5rem; //40px
  --font-size-xxl:                    2rem; //32pxg
  --font-size-xl:                     1.5rem; //24px
  --font-size-l:                      1.125rem; //18px
  --font-size-m:                      var(--font-size-base);
  --font-size-s:                      0.875rem; //14px
  --font-size-xs:                     0.75rem; //12px
  --font-size-xxs:                    0.625rem; //10px
  --font-size-xxxs:                   0.5rem; //8px

  // Font weight
  --font-weight-light:                300;
  --font-weight-medium:               500;
  --font-weight-semibold:             600;

  // Headers
  --font-size-h1:                     var(--font-size-xxxl);
  --font-size-h2:                     var(--font-size-xxl);
  --font-size-h3:                     var(--font-size-xl);
  --font-size-h4:                     var(--font-size-l);
  --font-size-h5:                     var(--font-size-m);
  --font-size-h6:                     var(--font-size-s);

  // Line height
  --line-height-default:              1.7;
  --line-height-medium:               1.4;
  --line-height-header:               1.2;

  --line-height-h1:                   48px;
  --line-height-h2:                   40px;
  --line-height-h3:                   32px;
  --line-height-h4:                   24px;

  // Other
  --header-margin:                    0.625rem;
  --paragraph-margin:                 0.625rem;
  --border:                           0.062rem solid var(--color-contrast-40);
  --border-thin:                      1px solid;
  --radius-regular:                   0.75rem;
  --radius-medium:                    0.625rem;
  --radius-small:                     0.375rem;

  // Button default
  --btn-font-size:                    var(--font-size-l);
  --btn-font-weight:                  var(--font-weight-medium);
  --btn-min-width:                    8.75rem; //140px
  --btn-height:                       3.5rem; //56px
  --btn-padding:                      0 1.5rem;
  --btn-radius:                       var(--radius-regular);
  --btn-border:                       var(--border-thin);

  // Input/Select
  --field-font-size:                  var(--font-size-m);
  --field-line-height:                var(--line-height-medium);
  --field-border-radius:              var(--radius-regular);
  --field-border-radius-inner:        var(--radius-medium);
  --field-height:                     4rem; //64px
  --field-option-height:              3.25rem;
  --field-padding:                    0 1rem;
  --field-label-top:                  1.5rem;
  --field-label-focused-font-size:    var(--font-size-xs);
  --field-label-focused-translate:    translate(0, -0.625rem);
  --field-comment-font-size:          var(--font-size-s);
  --field-comment-color:              var(--color-contrast-40);
  --field-comment-padding:            0.5rem;

  // Checkbox & Radio
  --checkRadioBorderWidth:            1px;
  --checkRadioRadius:                 6px;
  --checkRadioSymbol:                 '\2713\0020';
  --checkRadio-error-padding:         4px 0 0 29px;

  // Switch
  --switch-error-padding:             0.625rem;

  // Accessibility
  --accessibility-focus-style:        0 0 0 4px var(--color-contrast-0), 0 0 0 5px var(--color-contrast-50);
}