/* @import "./reset/index.css"; */
:root {
  --border-radius-none: 0;
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-pill: 500px;
  --border-radius-circular: 50%;
}
:root {
  --border-width-none: 0;
  --border-width-hairline: 1px;
  --border-width-thin: 2px;
  --border-width-thick: 4px;
  --border-width-heavy: 8px;
}
:root {
  --color-master-darkest: light-dark(#0a0a0a, #f5f5f5);
  --color-master-darker: light-dark(#1a1a1a, #e1e1e1);
  --color-master-dark: light-dark(#2c2c2c, #c9c9c9);
  --color-master: light-dark(#626262, #a3a3a3);
  --color-master-light: light-dark(#e6e6e6, #5c5c5c);
  --color-master-lighter: light-dark(#f0f0f0, #3d3d3d);
  --color-master-lightest: light-dark(#fafafa, #1f1f1f);

  --color-primary-darker: light-dark(#413768, #b8acf3);
  --color-primary-dark: light-dark(#5b4d91, #9d88e6);
  --color-primary: light-dark(#6d5cae, #7a5ed1);
  --color-primary-light: light-dark(#8a7dbe, #6750c4);
  --color-primary-lighter: light-dark(#e2deef, #34257d);

  --color-complete-darker: light-dark(#2b6a94, #91d6ff);
  --color-complete-dark: light-dark(#3c93ce, #75bfff);
  --color-complete: light-dark(#48b0f7, #5daaf7);
  --color-complete-light: light-dark(#6dc0f9, #4a90cc);
  --color-complete-lighter: light-dark(#daeffd, #3c7fb3);

  --color-success-darker: light-dark(#0a7c71, #a3f8df);
  --color-success-dark: light-dark(#0dad9e, #88e6cc);
  --color-success: light-dark(#10cfbd, #66d4b8);
  --color-success-light: light-dark(#40d9ca, #52c0a5);
  --color-success-lighter: light-dark(#cff5f2, #3da591);

  --color-warning-darker: light-dark(#957d32, #ffe3aa);
  --color-warning-dark: light-dark(#cfae45, #ffd480);
  --color-warning: light-dark(#f8d053, #ffc658);
  --color-warning-light: light-dark(#f9d975, #e6b44e);
  --color-warning-lighter: light-dark(#fef6dd, #b5913e);

  --color-danger-darker: light-dark(#933432, #ffb3b0);
  --color-danger-dark: light-dark(#cd4945, #ff8f8c);
  --color-danger: light-dark(#f55753, #ff6b68);
  --color-danger-light: light-dark(#f77975, #e6615e);
  --color-danger-lighter: light-dark(#fddddd, #b94d4b);

  --color-info-darker: light-dark(#232b31, #b0c4cc);
  --color-info-dark: light-dark(#313b44, #97abb4);
  --color-info: light-dark(#3b4752, #7f929b);
  --color-info-light: light-dark(#626c75, #656f77);
  --color-info-lighter: light-dark(#d8dadc, #4b565e);

  --color-menu-dark: light-dark(#21252d, #2f333b);
  --color-menu: light-dark(#2b303b, #383c44);
  --color-menu-light: light-dark(#929aac, #6d727a);

  --color-pure-white: #fff;
  --color-pure-black: #000;
}
:root {
  --font-family-highlight: "Roboto Condensed", sans-serif;
  --font-family-base: "Roboto", sans-serif;
}
:root {
  --font-size-xxxs: 12px;
  --font-size-xxs: 14px;
  --font-size-xs: 16px;
  --font-size-sm: 20px;
  --font-size-md: 24px;
  --font-size-lg: 32px;
  --font-size-xl: 40px;
  --font-size-xxl: 48px;
  --font-size-xxxl: 64px;
  --font-size-display: 80px;
  --font-size-giant: 96px;
}
:root {
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
}
:root {
  --line-height-default: 100%;
  --line-height-xs: 115%;
  --line-height-sm: 120%;
  --line-height-md: 133%;
  --line-height-lg: 150%;
  --line-height-xl: 170%;
  --line-height-xxl: 200%;
}
:root {
  --opacity-level-semiopaque: 0.72;
  --opacity-level-intense: 0.64;
  --opacity-level-medium: 0.32;
  --opacity-level-light: 0.16;
  --opacity-level-semitransparent: 0.08;
}
:root {
  --shadow-level-0: none;
  --shadow-level-1:
    0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%),
    0 1px 3px 0 rgb(0 0 0 / 20%);
  --shadow-level-2:
    0 3px 4px 0 rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 12%),
    0 1px 8px 0 rgb(0 0 0 / 20%);
  --shadow-level-3:
    0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%),
    0 3px 5px -1px rgb(0 0 0 / 20%);
  --shadow-level-4:
    0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%),
    0 5px 5px -3px rgb(0 0 0 / 20%);
  --shadow-level-5:
    0 12px 17px 2px rgb(0 0 0 / 14%), 0 5px 22px 4px rgb(0 0 0 / 12%),
    0 7px 8px -4px rgb(0 0 0 / 20%);
}
:root {
  --spacing-quarck: 4px;
  --spacing-nano: 8px;
  --spacing-xxxs: 16px;
  --spacing-xxs: 24px;
  --spacing-xs: 32px;
  --spacing-sm: 40px;
  --spacing-md: 48px;
  --spacing-lg: 56px;
  --spacing-xl: 64px;
  --spacing-xxl: 80px;
  --spacing-xxxl: 120px;
  --spacing-huge: 160px;
  --spacing-giant: 200px;
  --spacing_inset-quarck: 4px;
  --spacing_inset-nano: 8px;
  --spacing_inset-xs: 16px;
  --spacing_inset-sm: 24px;
  --spacing_inset-md: 32px;
  --spacing_inset-lg: 40px;
  --spacing_inset-huge: 48px;
  --spacing_inset-giant: 56px;
}