/*
 * Tokenek — 00-tokens.css
 * ------------------------------------------------------------------
 * Ez a fájl NEM ismétli meg a theme.json-ban már definiált presetek
 * (`--wp--preset--color--*`, `--wp--preset--font-size--*`,
 * `--wp--preset--spacing--*`, `--wp--preset--font-family--*`) értékét —
 * azokat WordPress automatikusan generálja a theme.json-ból.
 *
 * Itt csak azok a kiegészítő tokenek élnek, amikre a theme.json-nak
 * nincs natív mezője (border-szín árnyalatok, sarok-lekerekítés), vagy
 * amik nem "preset" jellegűek, hanem globális elrendezési konstansok.
 * Minden komponens- és szekció-CSS ebből a rétegből, illetve a WP
 * preset változókból olvas — sosem hardcode-olt hex/px értékből.
 */

:root {
  /* Szegély-árnyalatok — a szövegszín (--wp--preset--color--szoveg)
     áttetsző változatai, nincs külön hex duplikálva */
  --border-halvany: color-mix(in srgb, var(--wp--preset--color--szoveg) 12%, transparent);
  --border-kozepes: color-mix(in srgb, var(--wp--preset--color--szoveg) 20%, transparent);
  --border-eros: color-mix(in srgb, var(--wp--preset--color--szoveg) 35%, transparent);

  /* Sarok-lekerekítés — fokozatos, mérethez igazodó rendszer
     (2026-08-06, 2. finomítás): a "gombok szögletesek maradnak, minden
     más kerekített" szabály eredetileg tudatos kontraszt-elem volt,
     de miután sorban minden más elem (kártyák, csempék, képkeretek,
     térkép-helyőrző) lekerekült, az egyetlen éles gomb már nem
     "megfontolt feszültségként", hanem kifelejtett kivételként hatott
     — pontos felhasználói visszajelzés. Most egy logikus, fokozatos
     skála: kép a legszervesebb (16px) > kártya (14px) > gomb, a
     legkisebb/legkompaktabb elem, visszafogottabb, de nem éles
     sugárral (8px) — nem "pilula", megmarad a kompakt, cselekvő
     karakter, de nincs többé kirívó kivétel. */
  --radius-kep: 16px;
  --radius-kartya: 14px;
  --radius-gomb: 8px;

  /* Érintési célméret (WCAG 2.5.5) — minden interaktív elemnél */
  --erintesi-cel: 44px;

  /* Fókusz-jelölés — akadálymentességi alapkövetelmény, minden
     interaktív elemen egységesen ezt kell használni */
  --fokusz-szin: var(--wp--preset--color--elsodleges);
  --fokusz-vastagsag: 3px;
  --fokusz-tavolsag: 2px;

  /* Törésponti referenciák — dokumentációs célra (media query-kben nem
     lehet CSS custom property-t közvetlenül használni, de itt egy
     helyen rögzítve könnyebb karbantartani, ha változna) */
  --torespont-mobil: 560px;   /* fejléc-sáv sűrítés, KRÉTA gomb elrejtése */
  --torespont-navigacio: 1020px; /* asztali nav → hamburger menü */
}