@import url("fonts.css");
@import url("typography.css");
@import url("components/button.css");
@import url("components/icon.css");
@import url("components/header.css");
@import url("components/footer.css");
@import url("components/hero.css");
@import url("components/infoblock.css");
@import url("components/cta.css");
@import url("components/testimonials.css");

html {
  font-size: 16px;
}

:root {
  /* Brand Colors */
  --brand-yellow: #efcb54;
  --brand-teal: #4cbda4;
  --brand-light-blue: #d8efef;
  --brand-blue: #68b2e2;
  --brand-orange: #f4ad3d;
  --brand-light-yellow: #fcf7e7;

  /* Neutral Colors */
  --neutral-900: #212b36;
  --neutral-600: #637381;
  --neutral-300: #dde1e6;
  --neutral-100: #f5f6f8;
  --neutral-0: #ffffff;

  /* Common Colors */
  --common-black: #000000;
  --common-white: #ffffff;

  /* Divider */
  --divider-color: rgba(99, 115, 129, 0.24); /* NEUTRAL[600] at 0.24 opacity */

  /* Action Colors */
  --action-hover: rgba(99, 115, 129, 0.08);
  --action-selected: rgba(99, 115, 129, 0.16);
  --action-disabled: rgba(99, 115, 129, 0.8);
  --action-disabled-background: rgba(99, 115, 129, 0.24);
  --action-focus: rgba(99, 115, 129, 0.24);
  --action-active: #637381; /* NEUTRAL[600] */

  /* Text Colors */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-disabled: var(--neutral-600);

  /* Background Colors */
  --background-paper: var(--neutral-0);
  --background-default: var(--neutral-0);
  --background-neutral: var(--neutral-100);

  /* Max width */
  --max-width-desktop: 1440px;

  /* Typography */
  --font-family-sans: sans-serif;
  --font-family-heading: "Brandon Grotesque", sans-serif;
  --font-family-paragraph: "Libre Franklin", sans-serif;

  /* Font Sizes */
  --font-size-h1: 3rem; /* 48px */
  --font-size-h2: 2.25rem; /* 36px */
  --font-size-h3: 1.5rem; /* 24px */
  --font-size-h4: 1.25rem; /* 20px */
  --line-height-h4: 1.5rem; /* 24px */

  --font-size-p-lg: 1.125rem; /* 18px */
  --line-height-p-large: 1.875rem; /* 30px */
  --font-size-p-md: 1rem; /* 16px */
  --line-height-p-md: 1.5rem; /* 24px */
  --font-size-p-sm: 0.75rem; /* 12px */
  --line-height-p-sm: 1.125rem; /* 18px */

  --font-weight-heading: 450;
  --font-weight-heading-bold: 700;
  --font-weight-paragraph: 400;

  --border-radius-xs: 6px;
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
}

body {
  font-family: var(--font-family-paragraph);
  margin: 0;
  background-color: var(--brand-light-yellow);
  color: var(--text-primary);
}

#app {
  max-width: var(--max-width-desktop);
  margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}

p {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-paragraph);
}

.logo {
  display: inline-block;
  height: 60px;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}