/* Shared UI Utility Classes */
@use "app/shared/styles/ui-utils.scss";

@import "https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";

/* Kendo UI Theme */
//@import "@progress/kendo-theme-default/dist/all.css";

/* Override Kendo UI Card default width */
.k-card {
  width: 100% !important;
}

/* Reset styles */
*,
::before,
::after {
  box-sizing: border-box;
}

p,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

hr {
  height: 0;
  border-top-width: 1px;
  border-bottom-width: 0;
}
/* End of Reset styles */

:root {
  /* Color System */
  /* Misc */
  --kendo-color-app-surface: #fff;
  --kendo-color-surface: #f2f4f7;
  --kendo-color-surface-alt: #fff;
  --kendo-color-on-app-surface: #28323e;
  --kendo-color-subtle: #50647c;
  --kendo-color-border: rgba(23, 65, 99, 0.12);
  --kendo-color-border-alt: rgba(23, 65, 99, 0.24);
  /*  Base */
  --kendo-color-base-subtle: #e6eaef;
  --kendo-color-base-subtle-hover: #dae0e7;
  --kendo-color-base-subtle-active: #c1cbd7;
  --kendo-color-base: #ffffff;
  --kendo-color-base-hover: #e6eaef;
  --kendo-color-base-active: #dae0e7;
  --kendo-color-base-emphasis: #405063;
  --kendo-color-on-base: #202832;
  --kendo-color-base-on-surface: #28323e;
  --kendo-color-base-on-subtle: #181e25;
  /* Primary */
  --kendo-color-primary-subtle: #daecfb;
  --kendo-color-primary-subtle-hover: #c7e3f9;
  --kendo-color-primary-subtle-active: #a2d0f6;
  --kendo-color-primary: #0279cf;
  --kendo-color-primary-hover: #136db9;
  --kendo-color-primary-active: #1767ab;
  --kendo-color-primary-emphasis: #15588e;
  --kendo-color-on-primary: #ffffff;
  --kendo-color-primary-on-surface: #136db9;
  --kendo-color-primary-on-subtle: #174163;
  /* Secondary */
  --kendo-color-secondary-subtle: #a8b6c7;
  --kendo-color-secondary-subtle-hover: #8fa1b7;
  --kendo-color-secondary-subtle-active: #768ca7;
  --kendo-color-secondary: #607895;
  --kendo-color-secondary-hover: #50647c;
  --kendo-color-secondary-active: #405063;
  --kendo-color-secondary-emphasis: #202832;
  --kendo-color-on-secondary: #ffffff;
  --kendo-color-secondary-on-surface: #50647c;
  --kendo-color-secondary-on-subtle: #101419;
  /* Tertiary */
  --kendo-color-tertiary-subtle: #dafbf9;
  --kendo-color-tertiary-subtle-hover: #c7f9f7;
  --kendo-color-tertiary-subtle-active: #a2f6f1;
  --kendo-color-tertiary: #16d4cb;
  --kendo-color-tertiary-hover: #13b9b0;
  --kendo-color-tertiary-active: #16a29b;
  --kendo-color-tertiary-emphasis: #137c77;
  --kendo-color-on-tertiary: #000000;
  --kendo-color-tertiary-on-surface: #13b9b0;
  --kendo-color-tertiary-on-subtle: #104240;
  /* Error */
  --kendo-color-error-subtle: #fcdcd9;
  --kendo-color-error-subtle-hover: #fcc4c0;
  --kendo-color-error-subtle-active: #faa9a3;
  --kendo-color-error: #e71b0d;
  --kendo-color-error-hover: #d41a0c;
  --kendo-color-error-active: #c1170b;
  --kendo-color-error-emphasis: #911108;
  --kendo-color-on-error: #ffffff;
  --kendo-color-error-on-surface: #d41a0c;
  --kendo-color-error-on-subtle: #4d0904;
  /* Success */
  --kendo-color-success-subtle: #d9fce8;
  --kendo-color-success-subtle-hover: #c2fad9;
  --kendo-color-success-subtle-active: #a6f7c8;
  --kendo-color-success: #32ed7f;
  --kendo-color-success-hover: #14e069;
  --kendo-color-success-active: #12ce60;
  --kendo-color-success-emphasis: #0c8d42;
  --kendo-color-on-success: #000;
  --kendo-color-success-on-surface: #14e069;
  --kendo-color-success-on-subtle: #074b23;
  /*  Warning */
  --kendo-color-warning-subtle: #fcf6d9;
  --kendo-color-warning-subtle-hover: #faf0c2;
  --kendo-color-warning-subtle-active: #f7eaa6;
  --kendo-color-warning: #edcd32;
  --kendo-color-warning-hover: #e0be14;
  --kendo-color-warning-active: #ceaf12;
  --kendo-color-warning-emphasis: #8d770c;
  --kendo-color-on-warning: #000000;
  --kendo-color-warning-on-surface: #e0be14;
  --kendo-color-warning-on-subtle: #4b4007;
  /*  Info */
  --kendo-color-info-subtle: #d9f6fc;
  --kendo-color-info-subtle-hover: #c2f0fa;
  --kendo-color-info-subtle-active: #a6eaf7;
  --kendo-color-info: #32ceed;
  --kendo-color-info-hover: #14bee0;
  --kendo-color-info-active: #12afce;
  --kendo-color-info-emphasis: #0c778d;
  --kendo-color-on-info: #000000;
  --kendo-color-info-on-surface: #14bee0;
  --kendo-color-info-on-subtle: #07404b;
  /*  Light */
  --kendo-color-light-subtle: #e6eaef;
  --kendo-color-light-subtle-hover: #dae0e7;
  --kendo-color-light-subtle-active: #c1cbd7;
  --kendo-color-light: #f2f4f7;
  --kendo-color-light-hover: #e6eaef;
  --kendo-color-light-active: #dae0e7;
  --kendo-color-light-emphasis: #a8b6c7;
  --kendo-color-on-light: #181e25;
  --kendo-color-light-on-surface: #e6eaef;
  --kendo-color-light-on-subtle: #303c4a;
  /*  Dark */
  --kendo-color-dark-subtle: #202832;
  --kendo-color-dark-subtle-hover: #28323e;
  --kendo-color-dark-subtle-active: #303c4a;
  --kendo-color-dark: #101419;
  --kendo-color-dark-hover: #181e25;
  --kendo-color-dark-active: #202832;
  --kendo-color-dark-emphasis: #50647c;
  --kendo-color-on-dark: #ffffff;
  --kendo-color-dark-on-surface: #181e25;
  --kendo-color-dark-on-subtle: #f2f4f7;
  /*  Series A */
  --kendo-color-series-a-subtler: #e4b4c1;
  --kendo-color-series-a: #c35573;
  --kendo-color-series-a-bold: #a63a57;
  --kendo-color-series-a-subtle: #d5869b;
  --kendo-color-series-a-bolder: #792a3f;
  /*  Series B */
  --kendo-color-series-b-subtler: #accfec;
  --kendo-color-series-b: #4493d5;
  --kendo-color-series-b-bold: #2975b3;
  --kendo-color-series-b-subtle: #7ab3e1;
  --kendo-color-series-b-bolder: #1d5481;
  /*  Series C */
  --kendo-color-series-c-subtler: #b1d2c2;
  --kendo-color-series-c: #62a583;
  --kendo-color-series-c-bold: #4a8266;
  --kendo-color-series-c-subtle: #8abca3;
  --kendo-color-series-c-bolder: #345b47;
  /*  Series D */
  --kendo-color-series-d-subtler: #69bed8;
  --kendo-color-series-d: #28829d;
  --kendo-color-series-d-bold: #1c5b6d;
  --kendo-color-series-d-subtle: #38a9cc;
  --kendo-color-series-d-bolder: #10323d;
  /*  Series E */
  --kendo-color-series-e-subtler: #eed57c;
  --kendo-color-series-e: #d6ad1c;
  --kendo-color-series-e-bold: #a28415;
  --kendo-color-series-e-subtle: #e7c446;
  --kendo-color-series-e-bolder: #6c580e;
  /*  SERIES F */
  --kendo-color-series-f-subtler: #c5c0d8;
  --kendo-color-series-f: #7f76a9;
  --kendo-color-series-f-bold: #60568a;
  --kendo-color-series-f-subtle: #a29bc0;
  --kendo-color-series-f-bolder: #463f64;

  /* Typography */
  --kendo-font-family: "Fira Sans", sans-serif;

  --kendo-font-size: 14px;
  --kendo-font-size-sm: 12px;
  --kendo-font-size-md: var(--kendo-font-size);
  --kendo-font-size-lg: 16px;
  --kendo-font-size-xl: 20px;

  --kendo-h1-font-size: 56px;
  --kendo-h2-font-size: 42px;
  --kendo-h3-font-size: 35px;
  --kendo-h4-font-size: 28px;
  --kendo-h5-font-size: 21px;
  --kendo-h6-font-size: 14px;

  --kendo-line-height-xs: 1.2;
  --kendo-line-height-sm: 1.25;
  --kendo-line-height-md: 1.42;
  --kendo-line-height-lg: 1.5;

  --kendo-h1-line-height: calc((var(--kendo-font-size) * 4) * 1.25);
  --kendo-h2-line-height: calc((var(--kendo-font-size) * 3) * 1.2);
  --kendo-h3-line-height: calc((var(--kendo-font-size) * 2.5) * 1.2);
  --kendo-h4-line-height: calc((var(--kendo-font-size) * 2) * 1.2);
  --kendo-h5-line-height: calc((var(--kendo-font-size) * 1.5) * 1.25);
  --kendo-h6-line-height: calc((var(--kendo-font-size) * 1) * 1.25);

  --kendo-h1-font-weight: 400;
  --kendo-h2-font-weight: 400;
  --kendo-h3-font-weight: 400;
  --kendo-h4-font-weight: 500;
  --kendo-h5-font-weight: 500;
  --kendo-h6-font-weight: 500;

  /* Border radius */
  --k-border-radius-null: 0px;
  --kendo-border-radius-xs: 4px;
  --kendo-border-radius-sm: 6px;
  --kendo-border-radius-md: 12px;
  --kendo-border-radius-lg: 24px;
  --kendo-border-radius-xl: 36px;
  --kendo-border-radius-xxl: 48px;
  --kendo-border-radius-xxxl: 60px;
  --kendo-border-radius-full: 9999px;

  /* Panel Gradient */
  --panel-gradient: linear-gradient(to bottom, white 60%, #fafafa 0%);
}