/* ===========================================================================
   Talent Quest — tokeny design systemu (podzbiór używany przez landing)
   ---------------------------------------------------------------------------
   Wartości przepisane 1:1 z projektu Claude Design:
     _ds/talent-quest-design-system-ab229042.../components/fig-tokens.css
     _ds/talent-quest-design-system-ab229042.../tokens/fonts.css
     _ds/talent-quest-design-system-ab229042.../tokens/typography.css

   To jest WYCINEK: pełny plik tokenów ma ~600 zmiennych (komponenty formularzy,
   tabel, modali), z których landing nie używa ani jednej. Jeśli landing wejdzie
   do repo razem z aplikacją, podmień ten plik na pełny z design systemu.
   Przy podmianie zachowaj bloki @font-face niżej i nie przenoś @import
   z Google Fonts — polityka prywatności nie przewiduje przekazywania adresu IP
   odwiedzających do Google.

   ⚠️ W źródle tokeny liczbowe są BEZ jednostek (--radius-l: 12), bo pochodzą
   ze zmiennych Figmy. Tutaj zapisane są od razu z „px", żeby dało się ich
   używać wprost w CSS.
   =========================================================================== */

/* --- Kroje pisma (z naszego serwera, assets/fonts) ------------------------
   Wcześniej strona pobierała je z serwerów Google Fonts, czyli przekazywała Google
   adres IP odwiedzającego — tego przekazania nie opisuje polityka prywatności.
   Pliki i reguły to kopia 1:1 odpowiedzi Google Fonts dla Chrome'a (pobrana 05.10.2026; Inter v20,
   Figtree v9, JetBrains Mono v24) na zapytanie, którego strona używała dotąd:
     family=Inter:ital,opsz,wght@0,14..32,400..900;1,14..32,400..700
     &family=Bricolage+Grotesque:opsz,wght@10..48,200..800
     &family=Figtree:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap
   Zmieniony jest tylko adres w `src`, więc strona wygląda tak samo.
   ⚠️ Bricolage Grotesque tu NIE MA, bo Google go nie podawał: zakres opsz 10..48 wychodzi
   poza oś kroju (12..96), więc ta część zapytania była odrzucana bez błędu, a nagłówki
   z --font-display wyświetlały się Interem. Dołożenie kroju zmieni wygląd nagłówków.
   Wersja kroju jest w nazwie pliku — nowa wersja = nowa nazwa, inaczej przeglądarka
   może podać starą z pamięci. Licencja: SIL Open Font License 1.1 (OFL.txt przy krojach).
   -------------------------------------------------------------------------- */
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/figtree/figtree-v9-wght-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/figtree/figtree-v9-wght-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-italic-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-italic-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-italic-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-opsz-wght-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-v24-wght-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-v24-wght-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-v24-wght-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-v24-wght-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-v24-wght-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-v24-wght-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Prymitywy: forest (marka) ----------------------------------------- */
  --color-forest-25:  rgb(234, 244, 237);
  --color-forest-50:  rgb(236, 243, 238);
  --color-forest-100: rgb(214, 234, 216);
  --color-forest-200: rgb(182, 212, 186);
  --color-forest-300: rgb(143, 190, 152);
  --color-forest-400: rgb(101, 162, 117);
  --color-forest-500: rgb(76, 138, 94);
  --color-forest-600: rgb(60, 116, 74);
  --color-forest-700: rgb(21, 94, 44);
  --color-forest-800: rgb(15, 64, 30);
  --color-forest-900: rgb(2, 21, 9);

  /* --- Prymitywy: szarości ------------------------------------------------ */
  --color-gray-0:   rgb(255, 255, 255);
  --color-gray-25:  rgb(250, 250, 250);
  --color-gray-50:  rgb(244, 246, 244);
  --color-gray-100: rgb(236, 239, 236);
  --color-gray-200: rgb(220, 224, 220);
  --color-gray-300: rgb(192, 197, 193);
  --color-gray-400: rgb(139, 145, 140);
  --color-gray-500: rgb(98, 104, 99);
  --color-gray-600: rgb(73, 79, 74);
  --color-gray-700: rgb(50, 55, 51);
  --color-gray-800: rgb(26, 29, 26);
  --color-gray-900: rgb(12, 14, 12);

  /* --- Prymitywy: stany --------------------------------------------------- */
  --color-green-50:  rgb(220, 252, 231);
  --color-green-100: rgb(187, 247, 208);
  --color-green-500: rgb(22, 163, 74);
  --color-green-700: rgb(22, 101, 52);
  --color-amber-50:  rgb(255, 247, 232);
  --color-amber-100: rgb(252, 231, 195);
  --color-amber-500: rgb(173, 132, 64);
  --color-amber-700: rgb(122, 90, 37);
  --color-red-25:  rgb(254, 250, 250);
  --color-red-200: rgb(254, 202, 202);
  --color-red-500: rgb(220, 38, 38);
  --color-red-700: rgb(154, 20, 20);
  --color-amber-25: rgb(255, 251, 245);
  --color-blue-50:   rgb(224, 242, 254);
  --color-blue-500:  rgb(2, 132, 199);
  --color-blue-700:  rgb(7, 89, 133);

  /* --- Gradient marki (karta „tone=brand" i sekcja CTA) ------------------- */
  --color-brand-from: rgb(31, 90, 51);
  --color-brand-to:   rgb(20, 59, 35);

  /* --- Aliasy semantyczne ------------------------------------------------- */
  --brand-25:  var(--color-forest-25);
  --brand-50:  var(--color-forest-50);
  --brand-100: var(--color-forest-100);
  --brand-200: var(--color-forest-200);
  --brand-500: var(--color-forest-500);
  --brand-600: var(--color-forest-600);
  --brand-700: var(--color-forest-700);
  --brand-800: var(--color-forest-800);
  --brand-900: var(--color-forest-900);

  --bg-canvas:        var(--color-gray-25);
  --bg-surface:       var(--color-gray-0);
  --bg-subtle:        var(--color-gray-100);
  --bg-muted:         var(--color-gray-200);
  --bg-disabled:      var(--color-gray-50);
  --bg-brand:         var(--brand-700);
  --bg-brand-hover:   var(--brand-800);
  --bg-brand-active:  var(--brand-900);
  --bg-brand-subtle:  var(--brand-50);
  --bg-brand-soft:    var(--brand-100);
  --bg-success:       var(--color-green-500);
  --bg-success-subtle:var(--color-green-50);
  --bg-warning:       var(--color-amber-500);
  --bg-warning-subtle:var(--color-amber-50);
  --bg-info-subtle:   var(--color-blue-50);

  --border-default:       var(--color-gray-200);
  --border-strong:        var(--color-gray-300);
  --border-brand-subtle:  var(--brand-200);
  --border-focus:         var(--color-forest-600);
  --border-warning-subtle:var(--color-amber-100);
  --border-success-subtle:var(--color-green-100);

  --text-primary:          var(--color-gray-900);
  --text-secondary:        var(--color-gray-700);
  --text-tertiary:         var(--color-gray-500);
  --text-disabled:         var(--color-gray-400);
  --text-primary-inverse:  var(--color-gray-0);
  --text-brand:            var(--brand-700);
  --text-brand-on-subtle:  var(--brand-700);
  --text-success-strong:   var(--color-green-700);
  --text-warning-strong:   var(--color-amber-700);
  --text-info-strong:      var(--color-blue-700);

  --icon-brand:    var(--brand-700);
  --icon-success:  var(--color-green-500);
  --icon-warning:  var(--color-amber-500);
  --icon-tertiary: var(--color-gray-500);
  --icon-disabled: var(--color-gray-300);

  --color-surface-card-border: rgb(214, 232, 218);
  --color-ring-track:          rgb(232, 240, 232);

  /* --- Cienie ------------------------------------------------------------- */
  --shadow-color-brand-soft:   rgba(15, 64, 30, 0.05);
  --shadow-color-brand-medium: rgba(15, 64, 30, 0.10);
  --shadow-color-focus-brand:  rgba(21, 94, 44, 0.15);

  /* --- Promienie i obrysy (w źródle bez jednostek) ------------------------ */
  --radius-s: 4px;
  --radius-sm: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* --- Dodane dla landingu pracodawcy (raport, cennik, Giełda) ----------- */
  --bg-brand-muted:     var(--brand-25);
  --bg-warning-muted:   var(--color-amber-25);
  --bg-warning-strong:  var(--color-amber-700);
  --bg-error:           var(--color-red-500);
  --bg-error-muted:     var(--color-red-25);
  --border-error-subtle:var(--color-red-200);
  --text-error-strong:  var(--color-red-700);
  --icon-error:         var(--color-red-500);

  --stroke-xs: 1.25px;
  --stroke-m: 1.75px;
}