/* tokens.css */
@font-face {
  font-family: 'Unna';
  src: url('../fonts/Unna-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unna';
  src: url('../fonts/Unna-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Unna';
  src: url('../fonts/Unna-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unna';
  src: url('../fonts/Unna-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-ink: #0c0c0c;
  --color-paper: #f9fbfd;
  --color-parchment: #d1c3a0;

  --font-serif: "Unna", serif;
  --font-sans: "Montserrat", sans-serif;

  --type-logo-font: var(--font-serif);
  --type-logo-size: 20px;
  --type-logo-line-height: 22px;

  --type-nav-font: var(--font-serif);
  --type-nav-size: 13px;
  --type-nav-line-height: 22px;
  --type-nav-letter-spacing: 0.14em;
  
  --type-display-font: var(--font-serif);
  --type-display-size: 40px;
  --type-display-line-height: 1.08;

  --type-lead-font: var(--font-serif);
  --type-lead-size: 28px;
  --type-lead-line-height: 1.3;

  --type-heading-font: var(--font-serif);
  --type-heading-size: 24px;
  --type-heading-line-height: 1.25;

  --type-price-font: var(--font-serif);
  --type-price-size: 22px;

  --type-quote-font: var(--font-serif);
  --type-quote-size: 20px;
  --type-quote-line-height: 1.45;

  --type-body-font: var(--font-sans);
  --type-body-size: 15px;
  --type-body-line-height: 1.75;

  --type-small-font: var(--font-sans);
  --type-small-size: 13px;
  --type-small-line-height: 1.6;

  --type-meta-font: var(--font-sans);
  --type-meta-size: 12px;
  --type-meta-line-height: 1.6;

  --type-label-font: var(--font-sans);
  --type-label-size: 11px;
  --type-label-letter-spacing: 0.1em;

  --type-button-font: var(--font-sans);
  --type-button-size: 12px;
  --type-button-letter-spacing: 0.16em;

  --layout-page-padding: 40px;
  --layout-header-top: 36px;
  --layout-content-top: 56px;
  --layout-grid-gap: 56px;

  --rule-width: 1px;
  --rule-active-width: 3px;
  --rule-color: var(--color-ink);

  --icon-width: 38px;
}

@media (max-width: 759px) {
  :root {
    --type-display-size: 30px;
    --type-lead-size: 23px;
    --type-quote-size: 18px;
    --layout-page-padding: 20px;
    --layout-header-top: 28px;
    --layout-content-top: 32px;
    --icon-width: 58px;
  }
}