/*
colors
*/

:root {
  color-scheme: light;

  /* Brand and state */
  --color-primary:      #475569;
  --color-primary-link: #0D6EFD;
  --color-accent:       #5bc0de;
  --color-success:      #5cb85c;
  --color-error:        #d32f2f;

  /* Page canvas — distinct from --color-surface, the card and control fill */
  --color-canvas: #ffffff;

  /* Text, from most to least emphasis */
  --color-text-heading:   #010f3e;
  --color-text-body:      #1d3a55;
  --color-text-secondary: #425466;
  --color-text-muted:     #506d84;

  /* Lines and chrome */
  --color-input-border: #767676;
  --color-input-background: #ffffff;
  --color-input-background-muted: #fafafa;
  --color-input-text: #010f3e;
  --color-input-label: #010f3e;
  --color-input-placeholder: #506d84;
  --color-border:       #f0f0f0;

  /* Surfaces, from deepest to lightest */
  --color-surface-sunken: #f5f5f5;
  --color-surface-muted:  #fafafa;
  --color-surface:        #ffffff;
}

/*
type
typescale and default font families
*/

:root {
  /* The generic stack behind each family is what a screen falls back to when
     a face has yet to load, or names a family the catalogue does not carry. */
  --font-family-base: 'Mulish', sans-serif;
  --font-family-display: 'Mulish', sans-serif;
  --font-weight-base:    400;
  --font-weight-display: 700;
  --font-weight-bold:    700;
  --font-weight-button:  600;
  --font-size-xs: 12px;
  --font-size-s:  16px;
  --font-size-m:  18px;
  --font-size-l:  22.5px;
  --font-size-xl: 28.13px;
  --font-size-2xl: 35.16px;
}


@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/Mulish/Mulish-Variable.woff2") format("woff2");
}


/*
space
spacing is interpolated based on the type scale, no need to customize anything, see space.css
*/

/*
other properties
everything else, like borders, whatever, can be customized below. each customization will need end to end implementation
*/

* {
  --color-primary-button-text:           #ffffff;
  --color-primary-button-background:     #475569;
  --color-primary-button-border:         #475569;
  --button-disabled-opacity:             0.54;

  --color-secondary-button-text:         #010f3e;
  --color-secondary-button-background:   #ffffff;
  --color-secondary-button-border:       #010f3e;

  --color-provider-card-selected-border: #010f3e;
  --color-provider-card-deselect-icon: #425466;
  --provider-card-border-thickness:      1.5px;

  --button-border-radius:                5px;
  --button-border-thickness:             1px;
  --input-border-thickness:              1px;
  --input-border-radius:                 5px;
  --container-border-radius:             12px;
}