/* FEJLESZTŐI RÉTEG, éles oldalra nem megy ki.
   A strip.py kiveszi a rá mutató <link data-tweaks> sort.

   Mit csinál: felveszi a --tw- vezérelhető változókat az oldal jelenlegi
   értékeivel, majd a styles.css tokenjeit ezekre irányítja át. Mivel ez a
   fájl a styles.css UTÁN töltődik, a :root deklarációi nyernek.

   Így a tweaks panel a meglévő design-rendszert mozgatja, nem egy párhuzamosat.
   Az itt beállított végleges értékeket a panel CSS másolása gombjával kapod meg,
   és azokat a styles.css-be kell visszaírni, nem ebbe a fájlba. */

:root{
  /* type */
  --tw-type-display-font: "STIX Two Text";
  --tw-type-body-font: "Wix Madefor Text";
  --tw-type-display-size: 5.1rem;   /* a clamp felső határa */
  --tw-type-hero-size: 6.15rem;     /* a hero h1 saját clamp-jének felső határa */
  --tw-type-h2-size: 3rem;
  --tw-type-h3-size: 1.55rem;
  --tw-type-lead-size: 1.28rem;
  --tw-type-small-size: 0.815rem;
  --tw-type-brand-sub-size: 0.7rem;

  /* szin */
  --tw-szin-papir: #F8F3EA;
  --tw-szin-papir-emelt: #FDFAF4;
  --tw-szin-tinta: #1E1B16;
  --tw-szin-accent: #2E7E8C;
  --tw-szin-accent-gomb: #256D7A;
  --tw-szin-accent-szoveg: #1F5F6B;
  --tw-szin-accent-melly: #163F47;
  --tw-szin-accent-lablec: #12363D;
  --tw-szin-accent-halvany: #E4EDEE;
  --tw-szin-lenia: #DED4C4;

  /* terkoz */
  --tw-terkoz-gutter: 2.75rem;      /* a clamp felső határa */
  --tw-terkoz-szekcio-xl: 9.5rem;
  --tw-terkoz-szekcio-l: 7rem;
  --tw-terkoz-szekcio-m: 4.5rem;
  --tw-terkoz-szeles: 1240px;
  --tw-terkoz-szoveg: 64ch;

  /* mozgas. A suly 0 értéke azonnali megjelenést ad, tehát pontosan azt
     mutatja, amit egy prefers-reduced-motion beállítású látogató lát. */
  --tw-mozgas-suly: 1;
  --tw-mozgas-tavolsag: 18px;

  /* A meglévő tokenek átirányítása. A clamp alsó tagja marad, csak a felső
     határ vezérelhető, így a mobil-nézet ritmusa nem borul fel. */
  --paper: var(--tw-szin-papir);
  --paper-2: var(--tw-szin-papir-emelt);
  --ink: var(--tw-szin-tinta);
  --aqua: var(--tw-szin-accent);
  --aqua-btn: var(--tw-szin-accent-gomb);
  --aqua-txt: var(--tw-szin-accent-szoveg);
  --aqua-deep: var(--tw-szin-accent-melly);
  --aqua-deeper: var(--tw-szin-accent-lablec);
  --aqua-wash: var(--tw-szin-accent-halvany);
  --rule: var(--tw-szin-lenia);

  --display: var(--tw-type-display-font), Georgia, "Times New Roman", serif;
  --body: var(--tw-type-body-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-display: clamp(2.55rem, 1.25rem + 4.9vw, var(--tw-type-display-size));
  --fs-h2: clamp(1.85rem, 1.25rem + 2.2vw, var(--tw-type-h2-size));
  --fs-h3: clamp(1.2rem, 1.05rem + .6vw, var(--tw-type-h3-size));
  --fs-lead: clamp(1.06rem, 1rem + .35vw, var(--tw-type-lead-size));
  --fs-small: var(--tw-type-small-size);

  --gut: clamp(1.15rem, 4vw, var(--tw-terkoz-gutter));
  --w-wide: var(--tw-terkoz-szeles);
  --w-text: var(--tw-terkoz-szoveg);
}

.brand span{ font-size: var(--tw-type-brand-sub-size); }

/* A hero címe nem a --fs-display-t használja, saját clamp-je van. */
.hero h1{ font-size: clamp(2.9rem, 1.15rem + 6.4vw, var(--tw-type-hero-size)); }

.pad-xl{ padding-block: clamp(4.5rem, 10vw, var(--tw-terkoz-szekcio-xl)); }
.pad-l { padding-block: clamp(3.5rem, 7vw, var(--tw-terkoz-szekcio-l)); }
.pad-m { padding-block: clamp(2.6rem, 5vw, var(--tw-terkoz-szekcio-m)); }

/* A felúsztatás súlya és távolsága vezérelhetővé téve. */
.js .rv{
  transform: translateY(var(--tw-mozgas-tavolsag));
  transition-duration: calc(.62s * var(--tw-mozgas-suly));
}
.js .stagger > *{
  transform: translateY(calc(var(--tw-mozgas-tavolsag) * .45));
  transition-duration: calc(.5s * var(--tw-mozgas-suly));
}