/* here comes our style */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Variables */
html {
  /* font families */
  --base-font-family: "Roboto";

  /* font weights */
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;

  /* colors */
  --color-b50: #e6f0ff;
  --color-b100: #b1d0ff;
  --color-b200: #8bb9ff;
  --color-b300: #5699ff;
  --color-b400: #3585ff;
  --color-b500: #0367ff;
  --color-b600: #035ee8;
  --color-b700: #0249b5;
  --color-b800: #00388c;
  --color-b900: #001638;

  --color-g50: #ebebeb;
  --color-g75: #ababab;
  --color-g100: #898989;
  --color-g200: #565656;
  --color-g300: #333333;
  --color-g400: #242424;
  --color-g500: #1f1f1f;

  --color-w50: #fefefe;
  --color-w75: #fafafa;
  --color-w100: #f7f7f7;
  --color-w300: #f2f2f2;
  --color-w400: #c8c8c8;
  --color-w500: #949494;

  --color-o50: #fff7e6;
  --color-o100: #ffce6b;
  --color-o200: #ffb82b;
  --color-o300: #ffaa00;
  --color-o400: #b37700;
  --color-o500: #9c6800;

  /* Main colors */
  --color-primary: var(--color-b500);
  --color-grey: var(--color-g300);
  --color-white: var(--color-w300);
  --color-accent: var(--color-o300);

  /* Semantic colors */
  --color-d50: #fbeae9;
  --color-d75: #efa8a5;
  --color-d300: #d92b23;
  --color-d400: #981e19;

  --color-s50: #e8f4ed;
  --color-s75: #9fd0b4;
  --color-s300: #158c47;
  --color-s400: #0f6232;
  --color-s500: #062727;

  --color-wg50: #fffce6;
  --color-wg75: #fff396;
  --color-wg300: #ffe100;
  --color-wg400: #b39e00;
  --color-wg500: #c78500;
  --color-wg900: #3f3800;

  /* Main semantic colors*/
  --color-danger: var(--color-d300);
  --color-success: var(--color-s300);
  --color-warning: var(--color-wg300);

  /* Other colors */
  --color-digital-blue: #0064c7;
  --color-pure-white: #ffffff;
  --color-pure-black: #000000;

  /* font sizes and line-heights */
  --font-size-base: 16px;
  --line-height-base: 20px;
  --font-size-s: 14px;
  --line-height-s: 16px;
  --font-size-xs: 12px;
  --line-height-xs: 14px;
  --font-size-xxs: 10px;
  --line-height-xxs: 12px;

  --font-size-h4: 24px;
  --line-height-h4: 32px;
  --font-weight-h4: var(--light);

  --font-size-h5: 20px;
  --line-height-h5: 28px;
  --font-weight-h5: var(--medium);

  /* other base vars */
  --base-font-weight: var(--regular);
  --base-line-height: 1.25em;
  --base-text-color: var(--color-g500);

  /* radius */
  --border-radius-xs: 2px;
  --border-radius-s: 4px;
  --border-radius-m: 8px;
  --border-radius-l: 16px;
  --border-radius-pill: 1000px;

  /* border */
  --color-border-1: var(--color-w400);
  --color-border-2: var(--color-g75);
  --color-border-primary: var(--color-b500);

  /* spacing */
  --spacing-00: 2px;
  --spacing-01: 4px;
  --spacing-02: 8px;
  --spacing-03: 12px;
  --spacing-04: 16px;
  --spacing-05: 24px;
  --spacing-06: 32px;
  --spacing-07: 36px;
  --spacing-08: 40px;

  --gutter: 24px;

  /* Form vars */
  --form-input-font-size: var(--font-size-base);
  --form-input-line-height: 24px;
  --form-label-font-size: var(--font-size-s);
  --form-label-line-height: 20px;
  --form-placeholder-font-size: var(--font-size-base);
  --form-placeholder-line-height: 24px;
  --form-help-font-size: var(--font-size-xs);
  --form-help-line-height: 20px;

  /* Shadows */
  --shadow-s: 0px 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-m: 0px 2px 24px rgba(86, 86, 86, 0.25);
  --shadow-l: 0px 2px 40px rgba(86, 86, 86, 0.35);
}