@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

:root {
  --gap: 10px;
  --gap-double: 20px;
  --gap-half: 5px;

  --color-ui-primary: hsl(220, 14%, 22%);
  --color-ui-primary-darken: hsl(220, 14%, 17%);
  --color-ui-secondary: hsl(220, 40%, 90%);
  --color-ui-white: hsl(0, 0%, 100%);
  --color-bg-input: hsl(220 12.06% 27.24%);
  --color-border-input: hsl(220 12% 50%);
  --table: hsl(220, 15%, 10%);
  --shadow: hsl(220, 30%, 7%);

  --bradius: 6px;
  --site-maxwidth: 2560px;
  --site-colwidth: 1200px;

  --fwlight: 300;
  --fwregular: 500;
  --fwbold: 700;

  --nurofy: #fa4242;

  /* --status colors for notifications and status icons */
  --color-ui-status-info: #00abff;
  --color-ui-status-ok: #0aff99;
  --color-ui-status-warning: #fffb00;
  --color-ui-status-error: #ff0000;

  --compact-table-row-height: 28px;

  /* SMUI Theme colors. */
  --mdc-theme-on-primary: var(--color-ui-primary);
  --mdc-theme-primary: var(--color-ui-secondary);
  --mdc-shape-small: var(--bradius);
  --mdc-typography-button-text-transform: normal;
  --mdc-typography-font-family: 'Poppins', sans-serif;
  --mdc-typography-button-letter-spacing: normal;
  --mdc-typography-button-font-size: 16px;
  --mdc-protected-button-container-height: 44px;
  --mdc-checkbox-ink-color: var(--color-ui-white);
  --mdc-checkbox-unchecked-color: var(--color-ui-white);
  --mdc-theme-secondary: #676778;
  --mdc-theme-background: var(--color-ui-white);
  --mdc-theme-surface: var(--paper);
  --mdc-theme-error: var(--error);
  --mdc-theme-on-secondary: var(--color-ui-white);
  --mdc-theme-on-surface: #000;
  --mdc-theme-on-error: var(--color-ui-white);
  --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  --mdc-theme-text-primary-on-dark: #fff;
  --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
  --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
  --mdc-outlined-button-disabled-label-text-color: rgba(255, 255, 255, 0.7);
  --mdc-outlined-button-disabled-outline-color: rgba(255, 255, 255, 0.7);
  --mdc-outlined-button-with-icon-icon-size: 24px;
  --mdc-text-button-with-icon-icon-size: 24px;
  --mdc-protected-button-with-icon-icon-size: 24px;
  --mdc-layout-grid-margin-desktop: 24px;
  --mdc-layout-grid-gutter-desktop: 24px;
  --mdc-layout-grid-column-width-desktop: 72px;
  --mdc-layout-grid-margin-tablet: 16px;
  --mdc-layout-grid-gutter-tablet: 16px;
  --mdc-layout-grid-column-width-tablet: 72px;
  --mdc-layout-grid-margin-phone: 16px;
  --mdc-layout-grid-gutter-phone: 16px;
  --mdc-layout-grid-column-width-phone: 72px;
  --mdc-text-button-container-height: 44px;
  /* Segments buttons. */
  --mdc-segmented-button-unselected-container-fill-color: transparent;
  --mdc-segmented-button-unselected-ink-color: var(--color-ui-secondary);
  --mdc-theme-text-primary-on-background: var(--color-ui-secondary);
  --mdc-segmented-button-outline-color: var(--color-ui-secondary);
  --mdc-segmented-button-selected-ink-color: var(--color-ui-primary);
  --mdc-segmented-button-selected-container-fill-color: rgba(219, 226, 240, 1);

  --mdc-ripple-color: var(--color-ui-white);
  --mdc-outlined-button-outline-color: rgba(219, 226, 240, 1);
}

body.bubbelgum {
  --ink: hsl(45.1, 100%, 70%);
  --paper: hsl(306.5, 100%, 74.7%);
  --table: hsl(213.7, 100%, 67.8%);
  --shadow: hsl(244.8, 100%, 19.6%);

  --bradius: 10px;

  --fwlight: 500;
  --fwregular: 700;
  --fwbold: 300;

  transform: rotate(-3deg) scale(0.8) perspective(1000px) rotateX(10deg)
    translateY(-10%);
}