@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  src: url(../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont.ttf);
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  src: url(../assets/fonts/Manrope/Manrope-VariableFont_wght.ttf);
}

:root {
  color-scheme: light;

  --bg-darkest: light-dark(oklch(0.96 0.005 264), oklch(0.1 0.005 264));
  --bg-dark: light-dark(oklch(0.97 0.005 264), oklch(0.125 0.005 264));
  --bg: light-dark(oklch(0.98 0.005 264), oklch(0.15 0.005 264));
  --bg-light: light-dark(oklch(0.99 0.005 264), oklch(0.175 0.005 264));
  --bg-lightest: light-dark(oklch(1 0.005 264), oklch(0.2 0.005 264));
  --text: light-dark(oklch(0.15 0.01 264), oklch(0.96 0.01 264));
  --text-muted: light-dark(oklch(0.4 0.01 264), oklch(0.76 0.01 264));
  --highlight: light-dark(oklch(1 0.01 264), oklch(0.5 0.01 264));
  --border: light-dark(oklch(0.6 0.01 264), oklch(0.4 0.01 264));
  --border-muted: light-dark(oklch(0.7 0.01 264), oklch(0.3 0.01 264));
  --primary: light-dark(hsl(215 94 51), oklch(0.76 0.1 264));
  --text-on-primary: oklch(0.98 0 264);
  --secondary: light-dark(oklch(0.4 0.1 84), oklch(0.76 0.1 84));
  --bg-danger: light-dark(oklch(0.5 0.05 30), oklch(0.7 0.05 30));
  --bg-warning: light-dark(oklch(0.5 0.05 100), oklch(0.7 0.05 100));
  --bg-success-: light-dark(#ceebca, #0e2a10);
  --bg-success: light-dark(#dff0d8, #0e2a10);
  --success-text-: #099949;
  --success-text: #3c763d;
  --success-border: #d6e9c6;
  --bg-info: light-dark(oklch(0.5 0.05 260), oklch(0.7 0.05 260));

  /* shadows */
  --shadow-s:
    inset 0 1px 2px #ffffff20, /* top highlight */ 0 1px 2px #00000015,
    /* dark shadow */ 0 2px 4px #00000008; /* soft shadow */
  --shadow-m:
    inset 0 1px 2px #ffffff25, /* top highlight */ 0 2px 4px #00000020,
    /* dark shadow */ 0 4px 8px #0000000a; /* soft shadow */
  --shadow-l:
    inset 0 1px 2px #ffffff30, /* top highlight */ 0 3px 6px #00000025,
    /* dark shadow */ 0 6px 12px #0000000c; /* soft shadow */

  --border-radius-s: 4px;
  --border-radius-m: 8px;
  --border-radius-l: 12px;

  --mobile-breakpoint: 600px;

  /**
  Text styles
  To calculate the rem from values on the page below: wanted-font-size/body-m-font-size.
  @see: https://m3.material.io/styles/typography/type-scale-tokens
  */
  --font-family: "Manrope";

  --font-size-title-l: 1.43rem;
  --font-size-title-m: 1.14rem;
  --font-size-title-s: 1rem;

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

  --font-size-label-l: 1rem;
  --font-size-label-m: 0.86rem;
  --font-size-label-s: 0.79rem;

  /* EVERYTHING BELOW IS OLD */

  /* We don't support dark mode for now. */
  /* color-scheme: light dark; */

  /* #region Material Design*/
  /*
  We loosely follow the Material Design color system.
  @see: https://m3.material.io/styles/color/static/baseline#d3170e61-484c-4c35-a847-2aae11803ccb
  @see: https://m3.material.io/styles/color/roles
  */

  --kn-color-surface-container-lowest: light-dark(#ffffff, #000000);
  --kn-color-surface-container-low: light-dark(#fcfcfc, #030303);
  --kn-color-surface-container: light-dark(#f9f9f9, #060606);
  --kn-color-surface-container-high: light-dark(#f6f6f6, #090909);
  --kn-color-surface-container-highest: light-dark(#f3f3f3, #4a4a4a);

  --kn-color-on-surface: light-dark(#000000, #ffffff);
  --kn-color-on-surface-variant: light-dark(#767676, #9d9d9d);
  --kn-color-outline: light-dark(#cac9c9, #1e1e1e);
  --kn-color-outline-variant: light-dark(#e1e1e1, #1e1e1e);

  --kn-color-primary: rgba(0, 20, 198);
  --kn-color-on-primary: rgb(254, 254, 254);

  /**
  Text styles
  To calculate the rem from values on the page below: wanted-font-size/body-m-font-size.
  @see: https://m3.material.io/styles/typography/type-scale-tokens
  */
  --kn-font-family: "Manrope";

  --kn-font-size-title-l: 1.43rem;
  --kn-font-size-title-m: 1.14rem;
  --kn-font-size-title-s: 1rem;

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

  --kn-font-size-label-l: 1rem;
  --kn-font-size-label-m: 0.86rem;
  --kn-font-size-label-s: 0.79rem;

  /* #endregion */

  --kn-mobile-breakpoint: 600px;
}