@font-face {
  font-family: 'hz-Quicksand';
  font-weight: 300 700;
  font-style: normal;
  src: url('/public/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
}

:root {
  /*
  Try to follow M3 color system for new colors
  @see: https://m3.material.io/styles/color/static/baseline#d3170e61-484c-4c35-a847-2aae11803ccb
  @see: https://m3.material.io/styles/color/roles
  */
  --hz-color-primary: #61bb61;
  --hz-color-primary-container: #317d36;
  --hz-color-on-primary: #0b1016;
  --hz-color-on-primary-container: #ffffff;

  --hz-color-secondary: #61bb61;
  --hz-color-on-secondary: #0b1016;
  --hz-color-secondary-container: #f9fff8;
  --hz-color-on-secondary-container: #0b1016;

  --hz-color-tertiary: #FA9600;

  --hz-color-error: #B3261E;

  --hz-color-surface: #ffffff;
  --hz-color-surface-container-lowest: #ffffff;
  --hz-color-surface-container-low: #f5f5f5;
  --hz-color-surface-container: #f2f2f2;
  --hz-color-surface-container-high: #ececec;
  --hz-color-surface-container-highest: #e5e5e5;

  --hz-color-outline: #79747E;
  --hz-color-outline-variant: #CAC4D0;

  --hz-color-on-surface: #1D1B20;
  --hz-color-on-surface-variant: #49454F;

  --hz-font-size-body-l: 1.14rem;
  --hz-font-size-body-m: 1rem;
  --hz-font-size-body-s: 0.86rem;

  /* Not used at the moment, but collecting colors */
  .dark {
    --hz-color-outline: #938F99;
    --hz-color-outline-variant: #49454F;

    --hz-color-on-surface: #E6E0E9;
    --hz-color-on-surface-variant: #CAC4D0;
  }

  /* !deprecated  in favor of M3 color system*/
  --hz-color-bg: white;
  --hz-color-bg-2: #FAFAFA;
  --hz-color-bg-3: #f5f5f5;
  --hz-color-bg-4: #E0E0E0;
  --hz-color-accent: #FA9600;
  --hz-color-accent-transparent: #FA960015;
  --hz-color-accent-2: #61bb61;
  --hz-color-accent-2-transparent: #94d79926;
  --hz-color-text: #0b1016;
  --hz-color-text-2: silver;
  --hz-color-border: #f5f5f5;
  --hz-color-discourage: rgb(164, 14, 38);
  --hz-font-family: 'hz-Quicksand';

  --hz-area-stroke-color: #6a6a6a;
  --hz-area-stroke-color-highlighted: var(--hz-color-accent);
  --hz-area-stroke-color-selected: var(--hz-color-accent);
  --hz-area-stroke-color-focused: var(--hz-color-accent);

  --hz-min-z-index-above-map: 401;
  --hz-breakpoint-desktop: 40rem;
}