/*
 * @file
 * Typography styles.
 */

/* stylelint-disable custom-property-empty-line-before */
:root {
  --font-sans: 'Somar Sans', sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-serif: serif;

  --title-margin-block: var(--spacing-xxl) var(--spacing-component);
  --title-size: 2.5rem; /* 40px */
  --title-weight: bold;
  --title-line-height: 1.1;
  --title-letter-spacing: -0.04em;
  --title-font-family: var(--font-sans);

  --h1-margin-block: var(--spacing-xxl) var(--sp3);
  --h1-size: 2.5rem; /* 40px */
  --h1-weight: 600;
  --h1-line-height: 1.1;
  --h1-letter-spacing: -0.025em;
  --h1-font-family: var(--font-sans);

  --h2-margin-block: var(--spacing-xxl) var(--sp3);
  --h2-size: 2rem; /* 32px */
  --h2-weight: 700;
  --h2-line-height: 1.2;
  --h2-letter-spacing: -0.015em;
  --h2-font-family: var(--font-sans);

  --h3-margin-block: var(--spacing-xl) var(--sp3);
  --h3-size: 1.625rem; /* 26px */
  --h3-weight: 600;
  --h3-line-height: 1.15;
  --h3-letter-spacing: -0.05em;
  --h3-font-family: var(--font-sans);

  --h4-margin-block: var(--spacing-m);
  --h4-size: 1.5rem; /* 24px */
  --h4-weight: 600;
  --h4-line-height: 1.2;
  --h4-letter-spacing: -0.015em;
  --h4-font-family: var(--font-sans);

  --h5-margin-block: var(--spacing-s);
  --h5-size: 1.375rem; /* 22px */
  --h5-weight: 600;
  --h5-line-height: 1.2;
  --h5-letter-spacing: -0.015em;
  --h5-font-family: var(--font-sans);

  --h6-margin-block: var(--spacing-s);
  --h6-size: 1.25rem; /* 20px */
  --h6-weight: 600;
  --h6-line-height: 1.5;
  --h6-letter-spacing: -0.015em;
  --h6-font-family: var(--font-sans);

  --body-l-margin-block: var(--spacing-m);
  --body-l-size: 1.25rem; /* 20px */
  --body-l-weight: normal;
  --body-l-line-height: 1.8;
  --body-l-letter-spacing: normal;
  --body-l-font-family: var(--font-sans);

  --body-m-margin-block: var(--spacing-m);
  --body-m-size: 1rem; /* 16px */
  --body-m-weight: normal;
  --body-m-line-height: 1.8;
  --body-m-letter-spacing: 0.04em;
  --body-m-font-family: var(--font-sans);

  --body-s-margin-block: var(--spacing-s);
  --body-s-size: 0.875rem; /* 14px */
  --body-s-weight: normal;
  --body-s-line-height: 1.5;
  --body-s-letter-spacing: 0.04em;
  --body-s-font-family: var(--font-sans);

  @media (width > 400px) {
    --title-size: 3.75rem; /* 60px */
    --h1-size: 3rem; /* 48px */
  }

  @media (width > 600px) {
    --title-size: 5rem; /* 80px */
    --h1-size: 4.5rem; /* 72px */
    --h2-size: 3.375rem; /* 54px */
  }
}