/* ============================================================================ Ella — KÖZÖS design-token-forrás (IBM Carbon DS + Works-márka). EGYETLEN igazságforrás a színekhez, tipográfiához, eltartásokhoz. Minden modul ezt linkeli: Élő katalógus: /next/?katalogus=1 (az „Alkalmazások" menü „Design" pontjából). KÉT RÉTEG (2026-08-12) — „polc és címke": 1. POLC — `--p-*` primitívek: a NYERS értékek, névvel (`--p-gray-70`, `--p-brand-60`). Itt szerepel minden szín EGYSZER. A modulok EZEKET NE HASZNÁLJÁK. 2. CÍMKE — a szerep-tokenek (`--text-2`, `--brand`, `--danger`): azt mondják meg, MIRE való a szín, és a polcra MUTATNAK. A modulok KIZÁRÓLAG ezeket fogyasszák. MIÉRT: így egy szín EGY helyen van leírva (a márkapiros korábban 3 helyen szerepelt), és látszik, ha két szerep véletlenül azonos értéken áll (l. `--bg` / `--field-bg`). Ez egyben a sötét téma előfeltétele: témát váltani = a címkéket más polc-elemre kötni. MI KERÜL A POLCRA: a téma gerince — szürkék, márka, állapotszínek, kategorikus paletta. MI NEM: a KÜLSŐ márka-azonosítók (Office fájltípus-színek, Works/TestBirds badge) és az egyedi házi árnyalatok (jelölő, címke-lila). Ezek nem témázandók, és nem is ismétlődnek — a polcra emelve csak zajt adnának. Ha ezek egyike egyezik egy Carbon-értékkel, az VÉLETLEN, és szándékosan külön marad (pl. `--file-video` = `--cat-1` értéke — de nem együtt mozognak). SZEREP → SZEREP hivatkozás akkor helyes, ha az egyik DEFINÍCIÓ SZERINT a másik (pl. a fókuszgyűrű maga a márkaszín) — ilyenkor a lánc dokumentálja a szándékot. Ez a fájl eddig is így csinálta (`--toast-bg: var(--text)`, `--site-works-fg: var(--brand)`). ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════════ 1. POLC — PRIMITÍVEK. Nyers értékek, EGYSZER leírva. Modulban NE használd. ════════════════════════════════════════════════════════════════════════════ */ :root { /* — Szürke-létra — a Carbon hivatalos palettalépcsői (ellenőrizve a @carbon/colors csomagból) — */ --p-white: #ffffff; --p-gray-10: #f4f4f4; /* Carbon gray10 */ --p-gray-20: #e0e0e0; /* Carbon gray20 */ --p-gray-30: #c6c6c6; /* Carbon gray30 */ --p-gray-40: #a8a8a8; /* Carbon gray40 */ --p-gray-50: #8d8d8d; /* Carbon gray50 */ --p-gray-60: #6f6f6f; /* Carbon gray60 */ --p-gray-70: #525252; /* Carbon gray70 */ --p-gray-80: #393939; /* Carbon gray80 */ --p-gray-100: #161616; /* Carbon gray100 */ --p-black: #000000; /* — Köztes szürkék — NINCSENEK a hivatalos Carbon-palettalépcsőn (mérve 2026-08-12). A számozás csak a világosság szerinti helyüket jelzi a lépcsők között. — */ --p-gray-02: #fbfbfb; --p-gray-04: #fafafa; --p-gray-12: #f0f0f0; --p-gray-16: #e8e8e8; /* = a Carbon `gray10Hover` / `whiteHover` token értéke */ /* — Márka — Works-piros. NEM Carbon-szín; a számozás Carbon-logikájú: nagyobb = sötétebb. — */ --p-brand-10: #fde8ec; /* halvány háttér */ --p-brand-20: #f7c5d0; /* halvány háttér kerete */ --p-brand-60: #E73352; /* az alap márkaszín */ --p-brand-70: #d9304d; /* hover */ --p-brand-80: #b3283f; /* aktív */ /* — Állapot- és kategória-színek — Carbon-palettalépcsők (ellenőrizve a @carbon/colors-ból) — */ --p-red-10: #fff1f1; --p-red-50: #fa4d56; --p-red-60: #da1e28; --p-red-70: #a2191f; --p-green-10: #defbe6; --p-green-50: #24a148; --p-green-70: #0e6027; --p-yellow-10: #fcf4d6; --p-yellow-30: #f1c21b; --p-yellow-50: #b28600; --p-yellow-60: #8e6a00; --p-blue-10: #edf5ff; --p-blue-70: #0043ce; --p-purple-60: #8a3ffc; --p-teal-60: #007d79; --p-magenta-50: #ee5396; --p-cyan-50: #1192e8; /* WORKS „COLD PURPLE" — a cég MÁSODLAGOS színskálája (2026-09-11, user-adta). Nem Carbon-érték: az arculatból jön, és a HALADÁS-SKÁLA épül rá (l. lentebb). Csak azok a fokok állnak itt, amiket használunk — a teljes skála 050-től 950-ig tart. */ --p-hideglila-050: #eeeffc; --p-hideglila-100: #d7dbf9; --p-hideglila-200: #c1c6f6; --p-hideglila-300: #959ef1; /* a skála FŐ színe */ --p-hideglila-500: #5e69c9; --p-hideglila-600: #4d57b3; --p-hideglila-700: #464d91; --p-hideglila-800: #3d4271; } /* ════════════════════════════════════════════════════════════════════════════ 2. CÍMKÉK — SZEREP-TOKENEK. Ezeket fogyasszák a modulok. ════════════════════════════════════════════════════════════════════════════ */ :root { /* — Márka (Works-piros) — az elsődleges/interaktív szín, a Carbon-kék helyett — */ --brand: var(--p-brand-60); --brand-hover: var(--p-brand-70); --brand-active: var(--p-brand-80); --brand-soft: var(--p-brand-10); /* halvány háttér (kiemelt sor, chip) */ --brand-soft-border: var(--p-brand-20); /* a halvány márka-háttér kerete (pl. fork-sáv, idézet) */ --tag-bg: #C0C5F6; /* jegyzet-CÍMKE (chip) háttere — halvány periwinkle (user 2026-07-06; a #949EF1-ről halványítva). Egyedi házi árnyalat: nincs a polcon. */ --tag-bg-soft: #EEF0FC; /* a --tag-bg HALVÁNY változata — a jegyzet-SZERKESZTŐ sor háttér-hangolása (user 2026-07-06, „3. opció": a chipek lila családjából, hogy ne keveredjen) */ /* — Szürkék — Carbon Gray-skála — */ --text: var(--p-gray-100); /* Gray 100 — fő szöveg, címek */ --text-strong: var(--p-gray-80); /* Gray 80 — erős/hangsúlyos szöveg, másodlagos gomb */ --text-2: var(--p-gray-70); /* Gray 70 — másodlagos szöveg */ --text-3: var(--p-gray-60); /* Gray 60 — halvány, meta */ --border: var(--p-gray-20); /* Gray 20 — vonalak, keret */ --border-strong: var(--p-gray-50); /* Gray 50 — hangsúlyos keret */ --icon-disabled: var(--p-gray-30); /* Gray 30 — inaktív/üres ikon (pl. nem-kedvenc csillag) */ --text-disabled: var(--p-gray-40); /* Gray 40 — halvány szöveg / elválasztó „·" */ --bg: var(--p-gray-10); /* Gray 10 — oldal háttere */ --surface: var(--p-white); /* felület — kártya, panel */ --surface-2: var(--p-gray-04); /* halvány felület — sor-hover */ /* — Szemantikus (Carbon) — fő szín · sötét szöveg-szín · halvány háttér (badge/notif) — */ --success: var(--p-green-50); --success-text: var(--p-green-70); --success-soft: var(--p-green-10); --danger: var(--p-red-60); --danger-text: var(--p-red-70); --danger-soft: var(--p-red-10); --warning: var(--p-yellow-30); --warning-text: var(--p-yellow-60); --warning-soft: var(--p-yellow-10); /* SZÖVEG-JELÖLŐ (kiemelés olvasás közben — pl. a forrás-néző hivatkozott része). Halványabb, mint a --warning: nem figyelmeztet, hanem megtalálhatóvá tesz. Ella AI, 2026-08-07. Egyedi házi árnyalat. */ --jelolo: #fdea9d; --info: var(--p-blue-70); /* Carbon Blue 70 — infó szöveg/keret (a #0043ce a blue70; a korábbi „Blue 60" komment téves volt — mérve 2026-08-12) */ --info-soft: var(--p-blue-10); /* halvány infó-háttér */ --busy: var(--p-gray-40); /* Gray 40 — „foglalt / nem elérhető" idősáv (pl. Scheduler-rács más naptárból) */ --busy-soft: var(--p-gray-16); /* halvány „foglalt" tint (a sáv belseje / jelmagyarázat) */ --busy-strong: var(--p-gray-60); /* Gray 60 — „foglalt" sáv, ha FELIRAT kerül rá: a fehér szöveg kontrasztja itt 5,0:1 (a Gray40-en csak 2,4:1 volna, ami bukja a WCAG 4,5:1-et) */ /* — DIAGRAM-SKÁLA: „jó → rossz" halmozott sávokhoz (2026-08-26) — A szemantikus hármas (success/danger/warning) EGY állapotot fest. Egy halmozott sáv viszont EGYSZERRE mutatja a jó és a rossz végeket, sőt azok FOKOZATAIT — ehhez összetartozó, két irányba erősödő skála kell, amit egymás mellett is meg lehet különböztetni. MIÉRT SZEREP-TOKEN, ÉS NEM A POLCRÓL (`--p-green-70` stb.) HIVATKOZVA: mert ez egy DÖNTÉS arról, hogy a „rossz" erős vége sötét vörös, a gyengébb rosszé világosabb — nem pedig egy találomra kiválasztott árnyalat. A modul a SZEREPET nevezi meg, nem a színt, így egy későbbi paletta-igazítás egy helyen történik. (Első fogyasztó: a Treetest kimenet-sávjai.) A SEMLEGES a skálán KÍVÜL áll — az „se nem jó, se nem rossz" (pl. feladás) kategóriának nem szabad se zöldnek, se pirosnak látszania. */ --chart-jo-eros: var(--p-green-70); --chart-jo: var(--p-green-50); --chart-rossz: var(--p-red-50); --chart-rossz-eros: var(--p-red-70); --chart-semleges: var(--p-gray-40); /* KATEGÓRIA-SKÁLA: olyan megoszlásokhoz, aminek NINCS „jó" és „rossz" vége — korosztály, eszköz, bármilyen demográfia. Ha ezekre a jó→rossz skálát használnánk, a zöld-piros olyan értékítéletet sugallna, ami nincs az adatban („a 45–59 a rossz válasz"?). Négy AZONOS SÚLYÚ, eltérő árnyalat — a megkülönböztetés a színezeten múlik, nem a világosságon, mert négy szürke egymás mellett kifakul. Négynél több kategóriánál a skála körbefordul; a jelmagyarázat úgyis szövegesen is megnevezi mindet (WCAG 1.4.1). */ --chart-kategoria-1: var(--p-blue-70); --chart-kategoria-2: var(--p-teal-60); --chart-kategoria-3: var(--p-purple-60); --chart-kategoria-4: var(--p-magenta-50); /* HALADÁS-SKÁLA: „hol tart" — egy folyamat EGYMÁST KÖVETŐ állomásaihoz (2026-09-11, user-döntés). A harmadik skála-fajta, mert egyik meglévő sem illik rá: a jó→rossz skála értékítéletet sugallna (a „piszkozat" nem rosszabb, csak korábbi), a kategória-skála pedig egyenrangúnak mutatná az állomásokat, pedig SORRENDJÜK van. AMI EBBŐL KÖVETKEZIK: EGY színezet MÉLYÜL, ahogy a folyamat halad — így a sorrendet nem kell megtanulni, a sötétebb magától „előrébb"-et jelent. MIÉRT A HIDEG LILA, ÉS MIÉRT NEM A MÁRKASZÍN: a Works-piros az INTERAKTÍV szín (gomb, link, kijelölés). Ha az adat is piros volna, a „van itt teendőm" és a „ide lehet kattintani" egy képernyőn keveredne. A hideg lila a cég másodlagos skálája: a márkán belül van, de a piros szerepét nem veszi el. Emiatt SEM SZABAD piros a haladás jelölésére: a piros hibát vagy figyelmeztetést ígér, a „van vele dolgod" pedig se nem hiba, se nem figyelmeztetés. HÁROM LILA FOK, NAGY LÉPÉSEKKEL — 100 → 300 → 800 (2026-09-11, user-döntés). Négy fok a világos tartományban nem volt megkülönböztethető; az 500-as esett ki, mert az ült a 300 és a 800 között, és mindkettőhöz túl közel volt. A NEGYEDIK ÁLLAPOT („nem indult el") ezért nem kapott lila fokot: TÁBLÁZATBAN gondolatjel, a megoszlás-SÁVBAN pedig semleges világosszürke. Ez nem kényelmi rövidítés — a „nincs elkezdve" mögött tényleg NINCS adatsor, tehát a ház hiányzó-adat jelölése szó szerint igaz rá. A KIESETT is a skálán KÍVÜL áll, közepes szürkén: a lila a HALADÁST méri, aki pedig kiesett, az nem halad — ő nincs a versenyben. (Ugyanaz a megfontolás, mint a `--chart-semleges`-nél.) A `-text` párok a SZÁMOKÉ fehér háttéren: a világos fokok maguk olvashatatlanok volnának szövegként (a 100-as 1,2:1), ezért minden fokhoz tartozik egy sötétebb, WCAG-szerint olvasható párja. Első fogyasztó: a Recruitment jelentkező- és feladat-áttekintői. */ --halad-nem-indult: var(--p-gray-20); /* semleges: nincs mögötte adat (táblázatban gondolatjel) */ --halad-nala: var(--p-hideglila-100); --halad-megtette: var(--p-hideglila-300); --halad-kesz: var(--p-hideglila-800); --halad-kiesett: var(--p-gray-50); --halad-nem-indult-text: var(--p-gray-60); --halad-nala-text: var(--p-hideglila-600); --halad-megtette-text: var(--p-hideglila-600); --halad-kesz-text: var(--p-hideglila-800); --halad-kiesett-text: var(--p-gray-70); /* A PIRULA HALVÁNY HÁTTERE — a ház szemantikus mintája (`--success` / `--success-soft` / `--success-text`): a szerepnek van egy TELÍTETT színe (sáv, jelölő-pont) és egy HALVÁNY párja (pirula-háttér), a szöveg pedig a telített végről jön. Egy táblázatnyi tömör pirula színmezővé tenné a listát — és pont a leggyakoribb állapot lenne a leghangosabb (2026-09-11, user-lelet). KÉT SZEREPNEK NINCS PIRULÁJA, szándékosan: • „nem indult el" → GONDOLATJEL (nincs mögötte adatsor — a ház hiányzó-adat jelölése igaz rá); • „nála van" (piszkozat) → sima halk felirat, háttér nélkül. Így a táblázatban CSAK KÉT lila pirula marad — az elküldött (rád vár) és az elfogadott (kész) —, a többi cella csendes. */ --halad-megtette-soft: var(--p-hideglila-050); --halad-kesz-soft: var(--p-hideglila-200); --halad-kiesett-soft: var(--p-gray-16); /* — Kiemelés (szövegkiemelő / mark) — egyedi házi árnyalatok, nincsenek a polcon — */ --highlight-bg: #fff3b0; /* sárga kiemelés háttér */ --highlight-border: #e0a800; /* sárga kiemelés szegély */ /* MEGŐRZÖTT KIJELÖLÉS: a felület akkor mutatja, amikor a szerkesztő elveszti a fókuszt, de a kijelölés még ÉL (rich-text link-panel: a mező elveszi a fókuszt, a kijelölt szöveg viszont az, amire a link kerül). A natív kijelölés ilyenkor nem látszik. Carbon Blue 20 — szándékosan NEM a márkaszín: ez nem a mi hangsúlyunk, hanem a böngésző kijelölésének a pótlása. (2026-08-27) */ --selection-kept: #d0e2ff; /* — Kategorikus paletta (megkülönböztető színek: ágak, klaszterek, címkék — NEM szemantikus) — */ --cat-1: var(--p-purple-60); /* lila */ --cat-2: var(--p-teal-60); /* türkiz */ --cat-3: var(--p-magenta-50); /* magenta */ --cat-4: var(--p-yellow-50); /* arany */ --cat-5: var(--p-cyan-50); /* cián */ --cat-6: var(--p-red-50); /* piros */ /* — Tipográfia — */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* A méretek a CARBON TYPE-RÁCSON (12/14/16/20/24…, IBM Plex-re optimalizálva) — 2026-07-05 DS-audit: a korábbi köztes értékek (.85/.9/1.05/.78/.8rem) rácsra pattintva. Carbon-megfeleltetés kommentben. */ --fs-h1: 1.5rem; /* 24px — modul-cím (Docs.) ~ heading-04 környéke */ --fs-section: 1rem; /* 16px — szakaszcím (súly adja a hierarchiát) ~ heading-02 */ --fs-body: 1rem; /* 16px — törzsszöveg ~ body-02 */ --fs-small: 0.875rem; /* 14px — apró, meta ~ body-01 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --lh-tight: 1.3; /* címek, tömör sorok */ --lh-body: 1.5; /* törzsszöveg (Carbon-közeli) */ --lh-relaxed: 1.6; /* hosszabb olvasószöveg */ /* — Táblázat (Docs + Scheduler KÖZÖS spec) — a fej/cella/meta MÉRET innen; mindkét modul ezt fogyassza, ne hardcode-oljon. Szín: fej=--text-2, cella=--text, meta=--text-3; súly: fej=--fw-regular. — */ --fs-table-head: 0.75rem; /* 12px — oszlop-fejléc ~ label-01 */ --fs-table-cell: 0.875rem; /* 14px — cella elsődleges szöveg ~ body-compact-01 */ --fs-table-meta: 0.75rem; /* 12px — cella másodlagos / meta szöveg ~ label-01 */ /* — Eltartások (Carbon spacing) — a hivatalos skála részhalmaza; megfeleltetés: sp-1=spacing-02(4) · sp-2=03(8) · sp-3=04(12) · sp-4=05(16) · sp-5=06(24) · sp-6=07(32) · sp-7=09(48). A 2px (spacing-01) + 40/64 (spacing-08/10) igény esetén vehető fel — ma semmi nem használja. — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --icon-gap: 6px; /* ikon↔szöveg térköz gombokban (lazább, mint a korábbi .15rem) */ /* — Sarok-lekerekítés — Carbon-közeli: a vezérlők/kártyák szögletesek, csak a chip/avatar kerek — */ --radius-sm: 0; /* volt 3px — Carbon: éles sarok */ --radius: 0; /* volt 6px — gomb, mező, sor */ --radius-lg: 0; /* volt 8px — kártya, panel, modal */ --radius-pill: 999px; /* chip, tag — marad lekerekített */ --radius-round: 50%; /* avatar, pont-jelölő — kör */ /* — Árnyékok (Carbon-elevation) — */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, .15); /* legördülő menü, dropdown */ --shadow-md: 0 4px 16px rgba(0, 0, 0, .18); /* popover */ --shadow-lg: 0 10px 40px rgba(0, 0, 0, .2); /* modal */ /* — Motion (Carbon duration + productive easing) — 2026-07-05 DS-audit: az ad-hoc transitionök helyett EZEKET fogyaszd (pl. `transition: opacity var(--duration-fast-02) var(--easing-standard)`). — */ --duration-fast-01: 70ms; /* gomb/toggle mikrointerakció */ --duration-fast-02: 110ms; /* fade */ --duration-moderate-01: 150ms; /* kis kinyílás, rövid mozgás */ --duration-moderate-02: 240ms; /* kinyílás, toast */ --duration-slow-01: 400ms; /* nagy kinyílás, fontos értesítés */ --duration-slow-02: 700ms; /* háttér-dimmelés */ --easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9); /* elem végig látható */ --easing-entrance: cubic-bezier(0, 0, 0.38, 0.9); /* belépő elem (modal, dropdown) */ --easing-exit: cubic-bezier(0.2, 0, 1, 0.9); /* kilépő elem */ /* — Interakció / állapot — */ --focus: var(--brand); /* fókuszgyűrű — Carbon: telített márka, 2px-es keret. DEFINÍCIÓ SZERINT a márkaszín → a --brand-re mutat, nem a polcra. */ --overlay: rgba(0, 0, 0, .45); /* modal-háttér elsötétítés (rgba — nem polc-elem) */ --hover: var(--p-gray-12); /* gomb/ikon hover-háttér */ --hover-soft: var(--p-gray-04);/* lista-sor hover-háttér */ --surface-3: var(--p-gray-02); /* halvány felület (csempe, klip) */ /* Carbon `layer-accent-01` (Gray 20) — KITÖLTÉS, ami a SZÜRKE oldalháttéren is látszik. MIÉRT KELL KÜLÖN: a --field-bg (Gray 10) UGYANAZ, mint az oldal háttere (--bg), ezért kitöltésként a modul-oldalakon LÁTHATATLAN. Mérve 2026-08-06: az Ella AI kérdés-buboréka a katalógusban (fehér lap) jól nézett ki, a modulban viszont nyom nélkül beleolvadt. Ez a token az egy lépéssel sötétebb réteg — ezt használd „kitöltött doboz szürke lapon" esetben, ne a --border-t (az vonal-szín). */ --layer-accent: var(--p-gray-20); --video-bg: var(--p-black); /* valódi fekete — videó/médialejátszó háttér (letterbox) */ /* — Űrlapmező (Carbon field) — alsó-vonalas mező-stílus — */ --field-bg: var(--p-gray-10); /* Carbon field-01 — a mező háttere (FIGYELEM: azonos a --bg-vel, l. a --layer-accent kommentjét) */ --field-border: var(--p-gray-50); /* Gray 50 — a mező alsó vonala (fókuszban a márka) */ --control-h: 40px; /* egységes gomb/mező-magasság (Carbon „md") */ /* — Másodlagos akcent — a márkával EGYSÉGESÍTVE, de külön tokenen (a jövőre szétválasztható): ma a --brand-re mutat, szétváláskor elég a polc egy másik elemére kötni. — */ --accent: var(--brand); --accent-soft: var(--brand-soft); /* — On-brand szöveg — a márka-/színes háttéren olvasható (avatar, badge, elsődleges gomb) — */ --text-on-brand: var(--p-white); /* — Toast (értesítő-pirula) — a FORRÁS ezek a tokenek (a Docs `.toast` volt a kiindulási minta, de már EZT fogyasztja). Viselkedés-konvenció: lent KÖZÉPEN, szögletes, ~3s, nincs X-gomb, EGY soros és PONT NÉLKÜL a végén (a hibák a szövegbe fűzve). Minden modul ezt fogyassza; a Scheduler shadcn-toastja a megfelelő Tailwind-osztályokkal (bg-foreground/text-white). — */ --toast-bg: var(--text); /* Gray100 háttér — definíció szerint a fő szövegszín */ --toast-fg: var(--p-white); /* fehér szöveg */ --toast-fs: 0.88rem; /* ~14px */ --toast-pad: 0.6rem 1rem; /* függőleges · vízszintes */ --toast-radius: var(--radius); /* 0 — szögletes (Carbon) */ --toast-duration: 3000ms; /* auto-eltűnés ennyi után */ /* — Site-badge (külső márka-azonosítók — a projektválasztó ügyfél-szegmensei: Works / TestBirds). KÜLSŐ MÁRKA → nincs a polcon, nem témázandó. — */ --site-works-bg: #FCE3E8; --site-works-fg: var(--brand); /* a logó-piros #E73352 — a chip felirata a márkaszín legyen */ --site-tb-bg: #E4F8F0; --site-tb-fg: #183B4F; /* — Fájl-típus ikon-színek (Office + média) — a Docs/Records/Notes fájllistái közösen használják. KÜLSŐ MÁRKA-AZONOSÍTÓK (Word-kék, Excel-zöld…) → nincsenek a polcon, nem témázandók. Ha valamelyik egyezik egy Carbon-értékkel (--file-video = a --cat-1 értéke), az VÉLETLEN: külön mozognak. — */ --file-word: #2B579A; --file-excel: #217346; --file-ppt: #C43E1C; --file-pdf: #D13438; --file-image: #009d9a; --file-video: #8a3ffc; --file-archive: #ff832b; --file-folder: #FFB900; --file-generic: #697077; /* — Átmenetek (örökölt rövidítések) — a Carbon motion-tokeneket FOGYASZTJÁK (lásd fent): új kódban inkább közvetlenül a --duration-* + --easing-* párost használd. — */ --transition-fast: var(--duration-fast-02) var(--easing-standard); /* 110ms — oldalsáv, nav-csukás */ --transition: var(--duration-moderate-01) var(--easing-standard); /* 150ms — alap: hover, keret */ --transition-slow: var(--duration-moderate-02) var(--easing-standard); /* 240ms — folyamatsáv, hosszabb */ /* — Rétegzés (z-index) — */ --z-sticky: 5; --z-overlay: 50; --z-menu: 1000; /* — További tipográfia-lépcsők — */ --fs-xs: 0.75rem; /* felirat, meta (12px) */ --fs-display: 1.75rem; /* nagy cím (belépő, dashboard) */ /* — Layout / rács — FLUID (user-döntés 2026-07-05, DS-audit): a tartalom a Carbon 2x grid elve szerint a rendelkezésre álló szélességet tölti ki, a plafon a Carbon Max breakpoint (1584px) — a korábbi fix 1120px kivezetve. A modul-wrapek block-elemek `max-width: var(--container)`-rel → ettől automatikusan fluidok; az oldalmargót a wrap-padding adja (Carbon: 16px, Max-on 24px). A TELJES 16-oszlopos Carbon Grid-komponens bevezetése külön, modulonkénti lépés. — */ --container: 1584px; /* fluid plafon (Carbon Max breakpoint) — volt: fix 1120px */ --container-narrow: 880px; /* keskeny olvasó/űrlap (pl. jegyzet) — szándékosan kötött */ /* EGY-OSZLOPOS olvasó/kitöltő szélesség — szűkebb, mint a --container-narrow. Oda való, ahol a felhasználó EGY dolgot olvas és válaszol rá (Questions: egy kérdés egy oldalon), nem több mezős űrlapot tölt. A 736px a Questions kitöltő-oldalának eddigi, bevált értéke (46rem) — 2026-08-26-án került tokenbe, hogy a szélesség ne három helyen, beégetve éljen. */ --container-read: 736px; /* SZÉLES OLVASÓ — akkor, amikor EGY elem maga kíván több helyet, mint a szöveg: mátrix-kérdés (sorok × oszlopok), széles adat-tábla egy egyoszlopos folyamban. A `--container`-nél (1584px) szűkebb, mert továbbra is egy elemről van szó, nem lista-képernyőről. A 1120px a suite korábbi fix konténer-értéke — bevált mérték, itt kap új szerepet. (2026-08-27) */ --container-read-wide: 1120px; --container-wide: var(--container); /* széles, kétoszlopos (pl. videóvágó) = a fluid plafon */ --grid-min: 280px; /* kártya-rács oszlop-minimuma (auto-fill, minmax) */ --grid-gap: 1.5rem; /* kártya-rács térköze */ /* Töréspontok — a @media NEM fogad CSS-változót, ezért ezek REFERENCIA (Carbon-skála): 672px (md) · 1056px (lg) · 1312px (xlg) · 1584px (max) */ } /* — Akadálymentesség: mozgás-érzékeny felhasználók (Carbon motion-szabály) — minden animáció/átmenet gyakorlatilag kikapcsol. Az !important indokolt: a11y kill-switch, minden specifikusabb szabályt üt. — */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }