@layer reset, tokens, base, layouts, components, pages, utilities;

@font-face {
  font-family: 'Source Sans 3';
  src: url("https://f.simonenko.xyz/source-sans-3-3.052.woff2") format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url("https://f.simonenko.xyz/source-sans-3-italic-3.052.woff2") format('woff2');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url("https://f.simonenko.xyz/lora-italic-3.008.woff2") format('woff2');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url("https://f.simonenko.xyz/fira-code-5.002.woff2") format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Arial');
  font-style: normal;
  size-adjust: 93.33%;
}

@font-face {
  font-family: 'Source Sans 3 Fallback';
  src: local('Arial Italic');
  font-style: italic;
  size-adjust: 90.85%;
}

@layer tokens {
  :root {
    --font-text: 'Source Sans 3', 'Source Sans 3 Fallback', sans-serif;
    --font-display: 'Lora', Georgia, serif;
    --font-mono: 'Fira Code', Menlo, Consolas, monospace;
    --weight-heading: 700;
    --weight-subheading: 600;

    --text-h1: 40px;
    --leading-h1: 48px;
    --text-h2: 28px;
    --leading-h2: 36px;
    --text-h3: 22px;
    --leading-h3: 28px;
    --text-lead: 21px;
    --leading-lead: 32px;
    --text-body: 18px;
    --leading-body: 28px;
    --text-ui: 16px;
    --leading-text: 1.5;
    --text-code: 15px;
    --leading-code: 24px;
    --text-small: 14px;
    --leading-small: 20px;
    --text-micro: 12px;
    font-synthesis: none;
  }

  @media (max-width: 600px) {
    :root {
      --text-h1: 32px;
      --leading-h1: 40px;
      --text-h2: 24px;
      --leading-h2: 32px;
      --text-h3: 20px;
      --text-lead: 19px;
      --leading-lead: 28px;
      --text-body: 17px;
      --text-code: 14px;
    }
  }
}