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

  --surface: 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-muted: #5f6b73;
  --text-soft: #7a858c;
  --text-inverse: #f7fbff;

  --color-primary: #6f8f95;
  --color-primary-light: #85a4aa;
  --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;
}

html {
  scroll-behavior: smooth;
  overflow: hidden;
}

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

  background: linear-gradient(39deg, var(--bg-deep), var(--bg-mid), var(--bg-soft));
  overflow: auto;
}

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(--primary-color) !important;
  transition: var(--transition);

  &:hover {
    color: var(--primary-active) !important;
  }
}


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

.content {
  padding-top: 50px;
}

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

  &:hover {
    opacity: 1;
  }
}

html, body {
  height: 100vh;
}

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;
  }

  --mat-form-field-container-text-line-height: 16px;
  --mat-form-field-container-text-size: 16px;
}
