/* Kroje A–E. Odnośniki do arkuszy fontów są w <head> (lib/fonts.mjs), tu tylko @font-face Uncut Sans
   i mapowanie par na zmienne --gs-font-*, --gs-h*-* wg atrybutu [data-font] na <html>.
   Zmiana skali w lib/fonts.mjs wymaga zmiany tutaj (test fonts.test.mjs pilnuje spójności rodzin).
   Runda 1 (desktronic): jedna skala dla wszystkich par, każdy nagłówek w wadze 400. H1 60/70 i H2 48/56 na
   desktopie, 36/42 i 30/35 na mobile; tekst 16/26; przyciski 500, ceny 600. Pary różnią się tylko krojem
   i trackingiem. */

@font-face {
  font-family: 'Uncut Sans';
  src: url('https://cdn.jsdelivr.net/gh/kaspernordkvist/uncut_sans@v1.221.0/Webfonts/UncutSans-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --gs-h-variation: normal;
}

/* A: Aspekta + Switzer */
[data-font='a'] {
  --gs-font-display: 'Aspekta Variable', system-ui, sans-serif;
  --gs-font-text: 'Switzer', system-ui, sans-serif;
  --gs-h1-size: clamp(36px, 1.75rem + 2.5vw, 60px);
  --gs-h1-weight: 400;
  --gs-h1-tracking: -0.02em;
  --gs-h1-leading: 1.167;
  --gs-h2-size: clamp(30px, 1.25rem + 2.2vw, 48px);
  --gs-h2-weight: 400;
  --gs-h2-tracking: -0.015em;
  --gs-h2-leading: 1.167;
  --gs-h3-size: clamp(20px, 1rem + 0.6vw, 24px);
  --gs-h3-weight: 400;
  --gs-h3-tracking: -0.005em;
  --gs-h3-leading: 1.25;
  --gs-body-size: 16px;
  --gs-body-leading: 1.625;
  --gs-small-size: 14px;
  --gs-small-leading: 1.55;
  --gs-small-tracking: 0.005em;
  --gs-price-size: 19px;
  --gs-price-weight: 600;
  --gs-btn-font: 'Switzer', system-ui, sans-serif;
  --gs-btn-weight: 500;
  --gs-btn-size: 16px;
  --gs-chip-font: var(--gs-font-text);
  --gs-btn-tracking: 0em;
}

/* B: Fraunces + Uncut Sans */
[data-font='b'] {
  --gs-font-display: 'Fraunces', system-ui, sans-serif;
  --gs-font-text: 'Uncut Sans', system-ui, sans-serif;
  --gs-h1-size: clamp(36px, 1.75rem + 2.5vw, 60px);
  --gs-h1-weight: 400;
  --gs-h1-tracking: -0.01em;
  --gs-h1-leading: 1.167;
  --gs-h2-size: clamp(30px, 1.25rem + 2.2vw, 48px);
  --gs-h2-weight: 400;
  --gs-h2-tracking: -0.01em;
  --gs-h2-leading: 1.167;
  --gs-h3-size: clamp(20px, 1rem + 0.6vw, 24px);
  --gs-h3-weight: 400;
  --gs-h3-tracking: 0em;
  --gs-h3-leading: 1.25;
  --gs-body-size: 16px;
  --gs-body-leading: 1.625;
  --gs-small-size: 14px;
  --gs-small-leading: 1.55;
  --gs-small-tracking: 0.005em;
  --gs-price-size: 19px;
  --gs-price-weight: 600;
  --gs-btn-font: 'Uncut Sans', system-ui, sans-serif;
  --gs-btn-weight: 500;
  --gs-btn-size: 16px;
  --gs-chip-font: var(--gs-font-text);
  --gs-btn-tracking: 0em;
  --gs-h-variation: 'SOFT' 100, 'WONK' 0;
}

/* C: Roundo + Hanken Grotesk */
[data-font='c'] {
  --gs-font-display: 'Roundo', system-ui, sans-serif;
  --gs-font-text: 'Hanken Grotesk', system-ui, sans-serif;
  --gs-h1-size: clamp(36px, 1.75rem + 2.5vw, 60px);
  --gs-h1-weight: 400;
  --gs-h1-tracking: -0.015em;
  --gs-h1-leading: 1.167;
  --gs-h2-size: clamp(30px, 1.25rem + 2.2vw, 48px);
  --gs-h2-weight: 400;
  --gs-h2-tracking: -0.01em;
  --gs-h2-leading: 1.167;
  --gs-h3-size: clamp(20px, 1rem + 0.6vw, 24px);
  --gs-h3-weight: 400;
  --gs-h3-tracking: 0em;
  --gs-h3-leading: 1.25;
  --gs-body-size: 16px;
  --gs-body-leading: 1.625;
  --gs-small-size: 14px;
  --gs-small-leading: 1.55;
  --gs-small-tracking: 0.005em;
  --gs-price-size: 19px;
  --gs-price-weight: 600;
  --gs-btn-font: 'Roundo', system-ui, sans-serif;
  --gs-btn-weight: 500;
  --gs-btn-size: 16px;
  --gs-chip-font: 'Roundo', system-ui, sans-serif;
  --gs-btn-tracking: 0em;
}

/* D: Nunito + Nunito Sans */
[data-font='d'] {
  --gs-font-display: 'Nunito', system-ui, sans-serif;
  --gs-font-text: 'Nunito Sans', system-ui, sans-serif;
  --gs-h1-size: clamp(36px, 1.75rem + 2.5vw, 60px);
  --gs-h1-weight: 400;
  --gs-h1-tracking: -0.02em;
  --gs-h1-leading: 1.167;
  --gs-h2-size: clamp(30px, 1.25rem + 2.2vw, 48px);
  --gs-h2-weight: 400;
  --gs-h2-tracking: -0.015em;
  --gs-h2-leading: 1.167;
  --gs-h3-size: clamp(20px, 1rem + 0.6vw, 24px);
  --gs-h3-weight: 400;
  --gs-h3-tracking: -0.005em;
  --gs-h3-leading: 1.25;
  --gs-body-size: 16px;
  --gs-body-leading: 1.625;
  --gs-small-size: 14px;
  --gs-small-leading: 1.55;
  --gs-small-tracking: 0em;
  --gs-price-size: 19px;
  --gs-price-weight: 600;
  --gs-btn-font: 'Nunito Sans', system-ui, sans-serif;
  --gs-btn-weight: 500;
  --gs-btn-size: 16px;
  --gs-chip-font: 'Nunito', system-ui, sans-serif;
  --gs-btn-tracking: 0em;
}

/* E: General Sans + Switzer */
[data-font='e'] {
  --gs-font-display: 'General Sans', system-ui, sans-serif;
  --gs-font-text: 'Switzer', system-ui, sans-serif;
  --gs-h1-size: clamp(36px, 1.75rem + 2.5vw, 60px);
  --gs-h1-weight: 400;
  --gs-h1-tracking: -0.02em;
  --gs-h1-leading: 1.167;
  --gs-h2-size: clamp(30px, 1.25rem + 2.2vw, 48px);
  --gs-h2-weight: 400;
  --gs-h2-tracking: -0.015em;
  --gs-h2-leading: 1.167;
  --gs-h3-size: clamp(20px, 1rem + 0.6vw, 24px);
  --gs-h3-weight: 400;
  --gs-h3-tracking: -0.005em;
  --gs-h3-leading: 1.25;
  --gs-body-size: 16px;
  --gs-body-leading: 1.625;
  --gs-small-size: 14px;
  --gs-small-leading: 1.55;
  --gs-small-tracking: 0.005em;
  --gs-price-size: 19px;
  --gs-price-weight: 600;
  --gs-btn-font: 'Switzer', system-ui, sans-serif;
  --gs-btn-weight: 500;
  --gs-btn-size: 16px;
  --gs-chip-font: var(--gs-font-text);
  --gs-btn-tracking: 0em;
}