/* ========================================================================== brand.css — Naplóolvasó egységes márka-/design-token készlete Ez a fájl a KIZÁRÓLAGOS forrása minden szín-, tipográfia-, sugár- és árnyék-értéknek az alkalmazásban. A style.css (és minden más CSS-fájl) ezekre a CSS egyéni tulajdonságokra (custom properties) hivatkozik - sose írjon felül senki egy színt/betűtípust közvetlenül egy komponens- szabályban, ha helyette itt, egy központi helyen módosítható. FONTOS: az itt szereplő tokenek a mellékelt brand-design-system.css (DominoDomain márka-arculat) színpalettájából és tipográfiájából származnak - lásd az eredeti fájlt: assets/css/brand-design-system.css. VILÁGOS / SÖTÉT MÓD: a brand-design-system.css SAJÁT konvencióját követjük - alapból (osztály nélkül) SÖTÉT mód aktív, a "theme-light" osztálya kapcsol VILÁGOS módra (lásd assets/js/app.js setupThemeToggle() és assets/js/theme-init.js). A Naplóolvasó SZERVERoldalon (index.php) alapértelmezésben a "theme-light" osztályt adja a -re (adat-sűrű audit-eszközként a világos mód a jobb olvashatóság miatt az ÉRTELMES alapértelmezés), de a felhasználó választása (localStorage) mindig felülírja ezt kliensoldalon. ========================================================================== */ :root { /* --- SÖTÉT mód (alapértelmezett, ha nincs "theme-light" osztály) - a márka saját sötét palettájából (--brand-navy-deep/--brand-navy stb.) --- */ --accent: #2bbfa8; --accent-dark: #1e9e8c; --accent-light: rgba(30, 158, 140, 0.18); --paper: #0b1f33; --paper-alt: #0f3054; --surface: #123a5a; --ink: #eef2f5; --ink-soft: #9fb0c2; --line: rgba(255, 255, 255, 0.14); --danger: #e0553f; --danger-bg: rgba(224, 85, 63, 0.18); --warn: #e0a72e; --warn-bg: rgba(224, 167, 46, 0.18); --ok: #2fbf71; --ok-bg: rgba(47, 191, 113, 0.18); /* --- Tipográfia (--brand-font: Poppins) --- */ --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* --- Sugarak és árnyékok (--brand-radius: 12px, arányosan bővítve kisebb/nagyobb elemekhez) --- */ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.4); /* --- A fixált fejléc/lábléc magassága - lásd style.css .app-header / .app-footer (position: fixed) és a body/oldalsáv ehhez igazított eltolása/magassága. --- */ --header-height: 4.75rem; --footer-height: 3.25rem; } /* --- VILÁGOS mód: a márka html.theme-light palettája (fehér/világos felületek - a Naplóolvasó adat-sűrű táblázataihoz jobban olvasható) --- */ html.theme-light { --accent: #1e9e8c; --accent-dark: #167a6c; --accent-light: #e6f5f2; --paper: #f5f8fa; --paper-alt: #eef2f5; --surface: #ffffff; --ink: #14324d; --ink-soft: #3b4a5e; --line: #dde3e9; --danger: #e0553f; --danger-bg: #fdeae7; --warn: #e0a72e; --warn-bg: #fdf3e1; --ok: #2fbf71; --ok-bg: #e8f9ef; --shadow-sm: 0 1px 2px rgba(20, 50, 77, 0.06); --shadow-md: 0 4px 14px rgba(20, 50, 77, 0.1); --shadow-lg: 0 14px 34px rgba(20, 50, 77, 0.16); }