@import 'novo-design-tokens/scss';

:root {
  --background-body: #{$color-white};
  --background-main: #{$color-bright}; //f7f7f7
  --background-bright: #{$color-white}; //fff
  --background-dark: #{$color-silver}; //e2e2e2
  --background-muted: #{$color-sand}; //f4f4f4
  --text-main: #{$color-charcoal}; //#363636;
  --text-muted: #{$color-neutral}; //#70777f;
  --text-disabled: #{$color-slate}; //#70777f;
  --selection: #{$color-ocean}; //#9e9e9e;
  --text-selection: #{$color-white};
  --links: #{$color-ocean};
  --focus: #{$color-ocean};
  --border: #{$color-light}; //#dbdbdb;
  --code: #{$color-job};
  --animation-duration: 0.1s;
  --button-background: #{$light};
  --button-text: #{$color-charcoal};
  --button-hover: #aaa;
  --scrollbar-thumb: #{$color-stone};
  --scrollbar-thumb-hover: #{$color-slate};
  --form-placeholder: #949494;
  --form-text: #000;
  --variable: #39a33c;
  --highlight: #ff0;

  // Share
  --font-size-caption: #{$font-size-xs};
  --font-size-label: #{$font-size-sm};
  --font-size-text: #{$font-size-body};
  --font-size-button: #{$font-size-body};
  --font-size-title: #{$font-size-xl};
  --font-size-tab: 1.1rem; // todo: why?
}