@layer global, component, utility;

@layer global {

  @font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
  }

  @font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
  }

  /* Fonts */
  :root {
    --fs-14: calc(14 / 16 * 1rem);
    --fs-16: calc(16 / 16 * 1rem);
    --fs-18: calc(18 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-28: calc(28 / 16 * 1rem);
    --fs-36: calc(36 / 16 * 1rem);
    --fs-42: calc(42 / 16 * 1rem);
    --fs-44: calc(44 / 16 * 1rem);
    --fs-48: calc(48 / 16 * 1rem);
    --fs-72: calc(72 / 16 * 1rem);

    --font-size-h1: clamp(2.625rem, 1.5rem + 4.8vw, 4.5rem);
    --font-size-h2: var(--fs-36);
    --font-size-h3: var(--fs-24);

    @media (width >= calc(600 / 16 * 1rem)) {
      --font-size-h2: var(--fs-48);
    }
  }

  /* Colors */
  :root {
    --c-white: hsl(0, 0%, 100%);
    --c-gray-dark: hsl(233, 14%, 25%);

    --color-main-bg: var(--c-white);
    --color-text-dark: var(--c-gray-dark);
  }

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

  * {
    margin: 0;
  }

  body {
    font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
    line-height: 1.3;
    background-color: var(--color-main-bg);
    color: var(--color-text-dark);
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

  h1,
  h2,
  h3,
  p {
    text-wrap: balance;
  }

  h1 {
    font-size: var(--font-size-h1);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  h3 {
    font-size: var(--font-size-h3);
  }
}

@layer component {}

@layer utility {}