/* ============================================================
   INLEADIA — TOKENY
   Wyekstrahowane 1:1 z obecnego serwisu inleadia.com (Webflow).
   Jedyna zmiana wobec źródła: rodzina krojów.
     Inter Display  →  Plus Jakarta Sans
   Drobna naprawa: --ls-m było zapisane jako -5px (stała), co przy
   nagłówku 44px na telefonie zlepiało litery. Przeliczone na -.045em,
   co na desktopie (110px) daje te same -4.95px.
   ============================================================ */

:root{

  /* ---------- KOLOR ----------
     Paleta z planszy identyfikacji. Tłem jest ciemny granat-fiolet
     (pierwsze pole planszy), nie czerń. Nazwy zmiennych zostały
     strukturalne — zmieniły się wartości, nie role. */
  --black:#141B3A;          /* tło dokumentu — ciemny granat-fiolet */
  --black-lite:#1B2350;     /* tło kart i stopki                    */
  --chinese-black:#222B60;  /* karta o stopień wyżej, stan hover    */
  --rich-gray:#1A2148;      /* pola formularza                      */
  --raisin:#252E66;
  --shiny:#2A3372;
  --blue-shade:#2E3878;
  --stroke:#2E3768;         /* każde obramowanie                    */
  --onyx:#3B4688;
  --davys-grey:#6A74A8;
  --granite:#7C86B8;
  --dim-gray:#8F98C4;
  --grey:#A8B0D6;           /* tekst drugorzędny                    */
  --light-silver:#DCE0F2;   /* tekst akapitowy                      */
  --white:#F4F5FB;

  --accent:#A87FEE;         /* lawenda — akcent podstawowy          */
  --accent-ink:#141B3A;     /* tekst na lawendzie                   */
  --sky:#6CBFE8;
  --cream:#F6E1C5;
  --blush:#F4B8EA;
  --klein:#1A22C7;

  /* ---------- GRADIENT MARKI ----------
     Trzy przystanki z planszy identyfikacji, w tej samej kolejności,
     w jakiej stoją na planszy. Wcześniej te same wartości były
     wpisywane z ręki w ośmiu miejscach — każda odrobinę inna. */
  --g1:#B98CF5;      /* lawenda        */
  --g2:#8E7BF0;      /* fiolet         */
  --g3:#5FB6E6;      /* błękit         */
  --g1-hi:#C7A0F8;   /* warianty pod kursorem */
  --g2-hi:#9A88F3;
  --g3-hi:#6EC2EA;
  --gradient:linear-gradient(100deg,var(--g1),var(--g2),var(--g3),var(--g1));

  /* jedna baza cienia zamiast trzech prawie identycznych czerni */
  --ink:8,11,28;


  /* ---------- TYPOGRAFIA ---------- */
  --font-heading:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --font-body:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;

  --fw-normal:400;
  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;

  --ls-s:-.125em;
  --ls-m:-.045em;
  --ls-l:-.02em;
  --ls-xl:-.03em;

  --h1-size:100px;  --h1-lh:100%;
  --h2-size:80px;   --h2-lh:100%;
  --h3-size:58px;   --h3-lh:100%;
  --h4-size:44px;   --h4-lh:120%;
  --h5-size:36px;   --h5-lh:120%;
  --h6-size:22px;   --h6-lh:130%;

  --p1-size:18px;   --p1-lh:140%;
  --p2-size:17px;   --p2-lh:140%;
  --p3-size:16px;   --p3-lh:140%;
  --p4-size:14px;   --p4-lh:140%;

  /* ---------- PADDING ---------- */
  --p-none:0px;
  --p-xxxs:2px;  --p-xxs:4px;   --p-xs:6px;    --p-s:8px;
  --p-m:10px;    --p-l:12px;    --p-xl:14px;   --p-xxl:16px;
  --p-xxxl:18px; --p-4xl:22px;  --p-5xl:26px;  --p-6xl:28px;
  --p-7xl:36px;  --p-8xl:44px;  --p-9xl:54px;  --p-10xl:72px;
  --p-11xl:90px;--p-12xl:108px;--p-13xl:126px;--p-14xl:144px;

  /* ---------- GAP ---------- */
  --g-xxxs:2px;  --g-m:10px;   --g-l:12px;   --g-xl:16px;
  --g-xxl:18px;  --g-xxxl:18px;--g-4xl:22px; --g-5xl:26px;
  --g-6xl:28px;  --g-7xl:28px; --g-8xl:36px; --g-9xl:44px;
  --g-10xl:50px; --g-11xl:54px;

  /* ---------- PROMIEŃ ---------- */
  --r-s:8px;   --r-m:10px;  --r-l:12px;
  --r-xl:16px; --r-xxl:18px;--r-xxxl:20px;

  /* ---------- RUCH ---------- */
  /* jedna krzywa na cały serwis — ta sama, na której stoi r352 */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
  --t-fast:.18s;
  --t-base:.32s;
  --t-slow:.6s;

  /* ---------- SIATKA ---------- */
  --container:1188px;
  --container-pad:20px;
}

/* ---------- ≤ 991 px (tablet) ---------- */
@media screen and (max-width:991px){
  :root{
    --h1-size:64px; --h2-size:56px; --h3-size:52px;
    --h4-size:40px; --h5-size:36px; --h6-size:24px;
    --p1-size:20px; --p2-size:18px; --p3-size:16px; --p4-size:14px;

    --p-4xl:24px;  --p-5xl:28px;  --p-6xl:28px;  --p-7xl:32px;
    --p-8xl:40px;  --p-9xl:48px;  --p-10xl:60px; --p-11xl:80px;
    --p-12xl:100px;--p-13xl:100px;--p-14xl:100px;
  }
}

/* ---------- ≤ 767 px (duży telefon) ---------- */
@media screen and (max-width:767px){
  :root{
    --h1-size:52px; --h2-size:48px; --h3-size:44px;
    --h4-size:32px; --h5-size:30px; --h6-size:22px;
    --p1-size:18px; --p2-size:18px; --p3-size:16px; --p4-size:14px;

    --p-4xl:24px;  --p-5xl:24px;  --p-6xl:24px;  --p-7xl:24px;
    --p-8xl:32px;  --p-9xl:40px;  --p-10xl:48px; --p-11xl:72px;
    --p-12xl:80px; --p-13xl:80px; --p-14xl:80px;
  }
}

/* ---------- ≤ 479 px (telefon) ---------- */
@media screen and (max-width:479px){
  :root{
    --h1-size:44px; --h2-size:40px; --h3-size:36px;
    --h4-size:28px; --h5-size:24px; --h6-size:20px;
    --p1-size:18px; --p2-size:16px; --p3-size:16px; --p4-size:14px;

    --p-4xl:20px;  --p-5xl:20px;  --p-6xl:20px;  --p-7xl:20px;
    --p-8xl:24px;  --p-9xl:32px;  --p-10xl:40px; --p-11xl:60px;
    --p-12xl:72px; --p-13xl:72px; --p-14xl:72px;
  }
}