/*
colors
*/

:root {
  color-scheme: light;
  /* Semantic colour tokens — prefer these going forward. */
  --color-primary:       #475569;
  --color-primary-link:  #0D6EFD;
  --color-primary-mid:   #7491b2;
  --color-primary-dark:  #010f3e;
  --color-primary-hover: #475569;
  --color-secondary:     #425466;
  --color-info:          #5bc0de;
  --color-success:       #5cb85c;
  --color-accent:        #5bc0de;
  --color-background:    #fff;

  --color-neutral-1: #010f3e;
  --color-neutral-2: #1d3a55;
  --color-neutral-3: #425466;
  --color-neutral-4: #506d84;
  --color-neutral-5: #767676;
  --color-neutral-6: #e5f1ff;
  --color-neutral-7: #f0f0f0;
  --color-neutral-8: #f5f5f5;
  --color-neutral-9: #fafafa;
  --color-neutral-10: #fff;
}

/*
type
typescale and default font families
*/

:root {
  --font-family-base: 'Mulish';
  --font-family-display: 'Mulish';
  --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: 35.16px;
}



@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 700;
  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
*/

* {
  --primary-color-text: var(--color-neutral-10);
  --primary-color-bg: var(--color-primary);
  --primary-color-border: var(--color-primary);
  --primary-color-bg-active: var(--color-primary-hover);
  --primary-color-text-visited: var(--color-neutral-10);
  --primary-color-disabled-opacity: 0.54;
  --primary-color-text-hover: var(--color-neutral-10);
  --secondary-color-text: var(--color-neutral-1);
  --secondary-color-bg: var(--color-background);
  --secondary-color-border: var(--color-neutral-1);
  --secondary-color-text-active: var(--color-primary);
  --secondary-color-border-active: var(--color-primary);
  --secondary-color-text-visited: var(--color-secondary);
  --secondary-color-disabled-opacity: 0.54;
  --button-border-radius: 5px;
  --button-border-thickness: 2px;
  --input-border-thickness: 1px;
  --input-border-radius: 5px;
  --container-border-radius: 12px;
}