:root {
  --bg-deep: #292e49;
  --bg-mid: #536976;
  --bg-soft: #bbd2c5;

  --surface: rgba(244, 247, 245, 0.88);
  --surface-persist: rgba(244, 247, 245, 0.88);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --surface-dark: rgba(30, 36, 52, 0.72);
  --surface-border: rgba(41, 46, 73, 0.16);
  --surface-subtle: rgba(255, 255, 255, 0.38);
  --surface-muted: rgba(41, 46, 73, 0.06);

  --text: #1f2433;
  --text-soft: #7a858c;
  --text-inverse: #f7fbff;

  --color-primary-dark: #48686e;
  --color-primary: #6f8f95;
  --color-primary-light: #85a4aa;
  --primary-color-sat: #578f9a;
  --primary-color: #6f8f95;
  --primary-hover: #85a4aa;
  --primary-active: #5b797e;
  --accent-color: #7fd1b9;

  --success: #4e9b6f;
  --warning: #d79a55;
  --danger: #c96b72;

  --navigation-background: rgba(30, 36, 52, 0.72);
  --hover-background: rgba(111, 143, 149, 0.16);
  --overlay: rgba(18, 24, 37, 0.62);
  --overlay-strong: rgba(18, 24, 37, 0.88);
  --divider: rgba(31, 36, 51, 0.12);
  --link-color: var(--primary-active);
  --focus-ring: 0 0 0 2px rgba(111, 143, 149, 0.28);
  --transition: all 300ms ease-in-out;
  --transition-fast: all 150ms ease-in-out;
  --icon-button-color: var(--primary-color);
  --icon-button-hover-color: var(--primary-active);
  --icon-button-opacity: 1;
  --icon-button-hover-opacity: 1;


  --mat-dialog-supporting-text-color: var(--text);
  --mat-button-text-label-text-color: var(--color-primary-dark);

  --gap-l: 20px;
  --gap-m: calc(var(--gap-l) / 1.618);
  --gap-s: calc(var(--gap-m) / 1.618);
}

body.theme-dark {
  --bg-deep: #07111b;
  --bg-mid: #102435;
  --bg-soft: #1d3d4a;

  --surface: rgba(13, 22, 34, 0.82);
  --surface-strong: rgba(18, 31, 46, 0.94);
  --surface-dark: rgba(4, 10, 18, 0.88);
  --surface-border: rgba(167, 198, 206, 0.24);
  --surface-subtle: rgba(255, 255, 255, 0.06);
  --surface-muted: rgba(167, 198, 206, 0.08);

  --text: #e8f0f4;
  --text-soft: #b7c9cf;
  --text-inverse: #f7fbff;

  --color-primary-dark: #89acb5;
  --color-primary: #7ea2ab;
  --color-primary-light: #a7c6ce;
  --primary-color-sat: #73bbc7;
  --primary-color: #7ea2ab;
  --primary-hover: #a7c6ce;
  --primary-active: #638892;
  --accent-color: #8ce3ca;

  --navigation-background: rgba(4, 10, 18, 0.82);
  --hover-background: rgba(126, 162, 171, 0.18);
  --overlay: rgba(4, 10, 18, 0.68);
  --overlay-strong: rgba(4, 10, 18, 0.9);
  --divider: rgba(232, 240, 244, 0.12);
  --link-color: var(--primary-hover);
  --focus-ring: 0 0 0 2px rgba(126, 162, 171, 0.34);
  --icon-button-color: var(--primary-hover);
  --icon-button-hover-color: var(--text-inverse);

  --mat-button-text-label-text-color: var(--text);
  --mat-option-label-text-color: var(--text);
  --mat-option-selected-state-label-text-color: var(--primary-hover);
  --mat-optgroup-label-text-color: var(--text-soft);
  --mat-select-enabled-trigger-text-color: var(--text);
  --mat-select-disabled-trigger-text-color: rgba(232, 240, 244, 0.38);
  --mat-select-placeholder-text-color: var(--text-soft);
  --mat-select-enabled-arrow-color: var(--text-soft);
  --mat-select-focused-arrow-color: var(--primary-hover);
  --mat-form-field-enabled-select-arrow-color: var(--text-soft);
  --mat-form-field-focus-select-arrow-color: var(--primary-hover);
  --mat-form-field-outlined-input-text-color: var(--text);
  --mat-form-field-outlined-label-text-color: var(--text-soft);
  --mat-form-field-outlined-hover-label-text-color: var(--text);
  --mat-form-field-outlined-focus-label-text-color: var(--primary-hover);
  --mat-form-field-outlined-outline-color: rgba(206, 223, 229, 0.22);
  --mat-form-field-outlined-hover-outline-color: rgba(206, 223, 229, 0.42);
  --mat-form-field-outlined-focus-outline-color: var(--primary-hover);
  --mat-form-field-outlined-caret-color: var(--primary-hover);
  --mat-form-field-filled-input-text-color: var(--text);
  --mat-form-field-filled-label-text-color: var(--text-soft);
  --mat-form-field-filled-hover-label-text-color: var(--text);
  --mat-form-field-filled-focus-label-text-color: var(--primary-hover);
  --mat-form-field-filled-container-color: rgba(36, 54, 72, 0.96);
  --mat-form-field-filled-active-indicator-color: rgba(206, 223, 229, 0.28);
  --mat-form-field-filled-hover-active-indicator-color: rgba(206, 223, 229, 0.48);
  --mat-form-field-filled-focus-active-indicator-color: var(--primary-hover);
  --mat-form-field-input-text-placeholder-color: var(--text-soft);
  --mat-form-field-filled-input-text-placeholder-color: var(--text-soft);
  --mat-form-field-outlined-input-text-placeholder-color: var(--text-soft);
  --mat-dialog-container-color: rgba(41, 61, 80, 0.98);
  --mat-dialog-subhead-color: var(--text);
  --mat-dialog-supporting-text-color: var(--text);
  --mat-select-panel-background-color: rgba(41, 61, 80, 0.98);
  --mat-autocomplete-background-color: rgba(41, 61, 80, 0.98);
  --mat-menu-container-color: rgba(41, 61, 80, 0.98);
  --mat-menu-item-label-text-color: var(--text);
  --mat-menu-item-icon-color: var(--text-soft);
  --mat-menu-item-hover-state-layer-color: rgba(255, 255, 255, 0.08);
  --mat-menu-item-focus-state-layer-color: rgba(255, 255, 255, 0.12);
  --mat-menu-divider-color: rgba(206, 223, 229, 0.16);
  --mat-checkbox-label-text-color: var(--text);
  --mat-checkbox-disabled-label-color: rgba(232, 240, 244, 0.42);
  --mat-checkbox-unselected-icon-color: rgba(206, 223, 229, 0.72);
  --mat-checkbox-unselected-hover-icon-color: var(--text);
  --mat-checkbox-unselected-focus-icon-color: var(--text);
  --mat-checkbox-selected-icon-color: var(--primary-hover);
  --mat-checkbox-selected-hover-icon-color: var(--primary-hover);
  --mat-checkbox-selected-focus-icon-color: var(--primary-hover);
  --mat-checkbox-selected-checkmark-color: #07111b;
  --mat-checkbox-disabled-selected-checkmark-color: rgba(7, 17, 27, 0.72);
  --mat-checkbox-disabled-selected-icon-color: rgba(206, 223, 229, 0.34);
  --mat-checkbox-disabled-unselected-icon-color: rgba(206, 223, 229, 0.28);
  --mat-checkbox-unselected-hover-state-layer-color: rgba(232, 240, 244, 0.12);
  --mat-checkbox-unselected-focus-state-layer-color: rgba(232, 240, 244, 0.16);
  --mat-checkbox-unselected-pressed-state-layer-color: rgba(167, 198, 206, 0.18);
  --mat-checkbox-selected-hover-state-layer-color: rgba(167, 198, 206, 0.16);
  --mat-checkbox-selected-focus-state-layer-color: rgba(167, 198, 206, 0.2);
  --mat-checkbox-selected-pressed-state-layer-color: rgba(167, 198, 206, 0.22);
}

body.theme-dark .mat-mdc-text-field-wrapper {
  background-color: rgba(36, 54, 72, 0.96);
}

body.theme-dark .mdc-notched-outline__leading,
body.theme-dark .mdc-notched-outline__notch,
body.theme-dark .mdc-notched-outline__trailing {
  border-color: rgba(206, 223, 229, 0.22) !important;
}

body.theme-dark .mat-mdc-form-field:hover .mdc-notched-outline__leading,
body.theme-dark .mat-mdc-form-field:hover .mdc-notched-outline__notch,
body.theme-dark .mat-mdc-form-field:hover .mdc-notched-outline__trailing {
  border-color: rgba(206, 223, 229, 0.42) !important;
}

body.theme-dark .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
body.theme-dark .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
body.theme-dark .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
  border-color: var(--primary-hover) !important;
}

body.theme-dark .mat-mdc-input-element,
body.theme-dark .mat-mdc-select-value,
body.theme-dark .mat-mdc-select-min-line {
  color: var(--text) !important;
}

body.theme-dark .mat-mdc-form-field .mat-mdc-floating-label,
body.theme-dark .mat-mdc-form-field .mat-mdc-select-placeholder {
  color: var(--text-soft) !important;
}

body.theme-dark .mat-mdc-select-arrow svg {
  fill: var(--text-soft) !important;
}

body.theme-dark .cdk-overlay-container .mat-mdc-select-panel,
body.theme-dark .cdk-overlay-container .mat-mdc-autocomplete-panel,
body.theme-dark .cdk-overlay-container .mat-mdc-menu-panel {
  background: rgba(41, 61, 80, 0.98) !important;
  color: var(--text) !important;
}

body.theme-dark .cdk-overlay-container .mat-mdc-select-panel,
body.theme-dark .cdk-overlay-container .mat-mdc-autocomplete-panel {
  --mat-select-panel-background-color: rgba(41, 61, 80, 0.98);
  --mat-autocomplete-background-color: rgba(41, 61, 80, 0.98);
}

body.theme-dark .cdk-overlay-container .mat-mdc-option .mdc-list-item__primary-text,
body.theme-dark .cdk-overlay-container .mat-mdc-option .mat-pseudo-checkbox,
body.theme-dark .cdk-overlay-container .mat-mdc-menu-item .mat-mdc-menu-item-text {
  color: var(--text) !important;
}

body.theme-dark .cdk-overlay-container .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text {
  color: var(--primary-hover) !important;
}

body.theme-dark .cdk-overlay-container .mat-mdc-option:hover:not(.mdc-list-item--disabled),
body.theme-dark .cdk-overlay-container .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled),
body.theme-dark .cdk-overlay-container .mat-mdc-menu-item:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.08) !important;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: var(--text);
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(39deg, var(--bg-deep), var(--bg-mid), var(--bg-soft));
  z-index: -1;
}

p {
  margin: 8px 0;
}

h1, h2, h3, h4 {
  opacity: 0.5;
  padding: 0;
  margin: 0 0 20px 0;
}

a {
  color: inherit;
}

.mat-mdc-form-field {
  width: 100%;
}

.mat-mdc-icon-button {
  color: var(--icon-button-color, var(--primary-color));
  transition: var(--transition);

  &:hover {
    color: var(--icon-button-hover-color, var(--primary-active));
  }
}

body .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  background-color: rgba(0, 0, 0);
  opacity: 0.05;
}

.content > *:not(router-outlet) {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.content {
  padding-top: 50px;
}

.btn-icon {
  opacity: var(--icon-button-opacity);
  transition: var(--transition);

  &:hover {
    opacity: var(--icon-button-hover-opacity);
  }
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}


body {
  .swiper-button-next, .swiper-button-prev {
    opacity: 0.1;
  }

  .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
  }


}
