/* FitAdmin token-réteg (admin-design skill, 2026-08-04). Additív: SEMMILYEN meglévő elemet nem stílusoz, csak változókat definiál. A színek forrása marad az app.css :root / [data-theme="dark"] blokkja (a Brand.php tenant-felülírása is arra épül); itt csak alias és a hiányzó dimenziók vannak. Bekötve mindhárom layoutban az app.css ELŐTT (P1/1. lépés, 2026-08-04). */ :root { /* ---- Tipográfia: 6 lépcsős admin-skála ---- */ --text-xs: 12px; --lh-xs: 16px; /* badge, th, chip, segédszöveg */ --text-sm: 13px; --lh-sm: 18px; /* label, sub-cell, btn-sm */ --text-base: 14px; --lh-base: 20px; /* admin törzs (a body ténylegesen ezen áll) */ --text-lg: 17px; --lh-lg: 24px; /* kártyacím, oldalcím */ --text-xl: 20px; --lh-xl: 26px; /* kiemelt érték */ --text-kpi: 26px; --lh-kpi: 30px; /* KPI, számláló */ --fw-regular: 400; --fw-medium: 600; --fw-strong: 700; /* KIZÁRÓLAG számokra */ --tracking-tight: -0.015em; /* 20px felett */ --tracking-label: 0.08em; /* 12px uppercase */ /* ---- Térköz: 4px rács ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --gap-section: var(--sp-6); /* kártyák/szekciók között */ --pad-card-y: 12px; /* compact admin (meglévő érték) */ --pad-card-x: 14px; --pad-page: 20px; /* ---- Kontroll- és sor-méretek ---- */ --h-control: 36px; /* input, select, .btn */ --h-control-sm: 30px; /* .btn-sm */ --h-toolbar: 28px; --h-touch: 44px; /* mobil hitbox-minimum */ --row-compact: 36px; /* riport-jellegű táblázat */ --row-default: 44px; /* CRM-listák */ --topbar-h: 54px; /* meglévő .topbar magasság */ /* --sidebar-w az app.css-ben marad (216px) */ /* ---- Forma ---- */ /* --radius (10px) és --radius-sm (7px) az app.css-ből öröklődik */ --radius-pill: 999px; /* Árnyék CSAK overlay-en. A kártyák bordert kapnak. */ --shadow-overlay: 0 1px 2px oklch(24% 0.012 50 / .06), 0 6px 24px oklch(24% 0.012 50 / .10); --shadow-card: none; /* ---- Hiányzó felület-lépcső (kártya < popover < modál) ---- */ --surface-3: oklch(92.5% 0.008 75); /* ---- Szemantikus aliasok a meglévő tokenekre ---- */ --accent-primary: var(--primary); --accent-on: var(--on-vivid); --border-strong: var(--nav-border); --focus-ring: var(--primary-vivid); /* ---- Mozgás ---- */ --dur-hover: 130ms; --dur-overlay-in: 220ms; --dur-overlay-out: 160ms; --ease-out: cubic-bezier(.2, 0, 0, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); } [data-theme="dark"] { --surface-3: oklch(28.5% 0.014 55); /* Sötétben nincs valódi árnyék: az overlay-t világosabb felület + border emeli ki. */ --shadow-overlay: 0 8px 32px oklch(0% 0 0 / .5); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --surface-3: oklch(28.5% 0.014 55); --shadow-overlay: 0 8px 32px oklch(0% 0 0 / .5); } } /* Sűrűség-váltó: az admin alapból compact, a recepciós/érkeztető képernyő comfortable. Használat: */ [data-density="comfortable"] { --text-base: 16px; --lh-base: 24px; --h-control: 40px; --h-control-sm: 34px; --row-default: 52px; --pad-card-y: 16px; --pad-card-x: 18px; } /* Mobilon minden kontroll érintési célfelületet kap, a vizuális méret változatlan marad (a hitbox-bővítést a komponens-CSS végzi a --h-touch alapján). */ @media (max-width: 640px) { :root { --pad-page: 12px; --h-control: 40px; } }