@import "/css/utils/reset.css";
@import "/css/utils/utils.css";

@import "/css/atoms/buttons.css";
@import "/css/atoms/icons.css";
@import "/css/atoms/typography.css";
@import "/css/atoms/logo.css";
@import "/css/atoms/toggle.css";
@import "/css/atoms/form-message.css";

@import "/css/molecules/main-menu.css";
@import "/css/molecules/page-hero.css";
@import "/css/molecules/about-us.css";
@import "/css/molecules/our-services.css";
@import "/css/molecules/customer-partners.css";
@import "/css/molecules/founding-team.css";
@import "/css/molecules/contact-us.css";

@import "/css/organisms/header.css";
@import "/css/organisms/footer.css";

:root {
  --border-radius-default: 0.5rem;
  --border-radius-medium: 1rem;
  --border-radius-circular: 50%;

  --border-input: 2px solid var(--color-neutral-inverted);

  --color-red-10: #ffd3d3;
  --color-red-50: #bf3030;
  --color-red-80: #491616;

  --color-green-10: #cdfdd0;
  --color-green-50: #30bf39;
  --color-green-80: #163017;

  --color-purple-50: #4f30bf;

  --color-blue-40: #1e82d9;
  --color-blue-50: #0a58bf;
  --color-blue-80: #121e5e;
  --color-blue-90: #010b40;

  --color-neutral-10: #f5f5f5;
  --color-neutral-20: #f1f1f1;
  --color-neutral-30: #d9d9d9;
  --color-neutral-60: #292e3c;
  --color-neutral-80: #060911;
  --color-neutral-90: #080a0e;

  --color-neutral-inverted: #fff;

  --color-nav-item-hover: rgba(30, 130, 217, 0.5);
  --color-background-body: var(--color-neutral-10);
  --color-hero-gradient: linear-gradient(
    to bottom,
    var(--color-blue-50),
    var(--color-blue-40)
  );
  --color-profile-copy-gradient: linear-gradient(
    to bottom,
    var(--color-neutral-90),
    var(--color-blue-50)
  );
  --color-founders-gradient: linear-gradient(
    to bottom,
    var(--color-neutral-10) 0%,
    var(--color-neutral-30) 100%
  );

  --layout-spacing-narrow: 0.5rem;
  --layout-spacing-default: 1rem;
  --layout-spacing-medium: 2rem;
  --layout-spacing-large: 7rem;

  --layout-centered: 0 auto;
  --layout-max-page-width: 90rem;
  --layout-readable-line-length-fallback: 40rem;
  --layout-readable-line-length: 70ch;

  --layout-send-to-back: -1;
  --layout-bring-to-front: 999;
}

@media screen and (min-width: 63.9375em) {
  :root {
    --border-radius-medium: 2rem;

    --layout-spacing-narrow: 1rem;
    --layout-spacing-default: 2rem;
    --layout-spacing-medium: 4rem;
    --layout-spacing-large: 10rem;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-background-body);
  font: 100% / var(--typography-line-height-default)
    var(--typography-font-family-body);
  margin: 0;
}

::placeholder {
  color: var(--color-neutral-20);
}

/* reCaptcha */
.g-recaptcha {
  margin-bottom: var(--layout-spacing-default);
}

@media screen and (min-width: 47.9375em) {
  .g-recaptcha {
    margin-bottom: 0;
  }
}