@use './includes/reset';
@use './includes/typography';
@use './components/drawer';
@use './components/icons';
@use './components/button';

:host,
:root {
  // Typography Defaults
  --default-font-family: 'Open Sans';
  --default-font-family: normal;
  --default-font-color: var(--color-grey-900);
  --default-font-weight: 400;
  // Color Primitives
  --color-white: #fff;
  --color-black: #000;
  --color-grey-900: #353b48;
  --color-grey-500: #656d78;
  --color-grey-200: #e6e9ed;
  --color-grey-100: #f5f7fa;
  --color-blue-900: #124e8f;
  --color-blue-500: #2286e6;
  --color-blue-200: #a6cef5;
  --color-blue-100: #e8f3fd;
  // Theme Naming Convention
  --theme-palette-primary-light: var(--color-blue-100);
  --theme-palette-paper-background: var(--color-white);
  --theme-palette-divider: var(--color-grey-100);
  --theme-palette-border: var(--color-grey-100);
  --theme-palette-border-hover: var(--color-grey-200);
  // Shape Primitives
  --border-radius: 5px;
  --border-width: 1px;
  // Buttons
  --button-border-radius: var(--border-radius);
  --button-border-stroke: var(--border-width);
  --button-background-color: var(--theme-palette-paper-background);
  --button-background-color--hover: var(--color-grey-100);
  --button-border-color: var(--theme-palette-border);
  --button-border-color--hover: var(--theme-palette-border-hover);
  --button-border: var(--button-border-stroke) solid var(--button-border-color);
  --button-border--hover: var(--button-border-stroke) solid var(--button-border-color--hover);
  --button-title-color: var(--color-grey-900);
  --button-description-color: var(--color-grey-500);
  --button-title-font-size: 16px;
  --button-description-font-size: var(--color-grey-500);
  --button-title-font-size: var(--color-grey-900);
  --button-description-font-size: var(--color-grey-500);
  // Colors
  font-family: var(--default-font-family);
  font-size: var(--default-font-size);
  color: var(--default-font-color);
  line-height: var(--default-line-height);
}