/* Közös sötét (alap) paletta – korábban minden static/*.html oldal saját, egymástól függetlenül másolt :root blokkban definiálta ugyanezt, ami könnyen szétcsúszott (hiányzó/eltérő token → hardkódolt szín → theme-törés, ld. 2026-07-09-i kontraszt-hibák). Innentől egy helyen karbantartva. */ :root { color-scheme: dark; --bg: #0d1117; --surface: #161b22; --surface2: #21262d; --border: #30363d; --accent: #58a6ff; --green: #3fb950; --yellow: #d29922; --red: #f85149; --text: #e6edf3; --muted: #8b949e; --teacher-bg: #1c2128; --student-bg: #0d419d22; --student-border: #388bfd44; /* Solid --accent hátteren (pl. messenger-stílusú chat-buborék) használt szövegszín - NEM fix fehér, mert a dark téma --accent-je egy VILÁGOS kék (#58a6ff), fehér szöveggel csak 2.5:1 kontrasztot ad (WCAG AA-hoz 4.5:1 kéne) - ellenőrizve, 2026-07-20. A --bg (közel fekete) inverz videóként ~7.5:1-et ad, ugyanaz a trükk, mint amit korábban a retro témák "kiválasztva" állapotánál használtunk. */ --accent-contrast: var(--bg); /* Főmenü-csempék (LANDING_MENU, ld. sidebar.js) kategória-színei - a userrel közösen elemzett referencia-app screenshotok alapján (2026-07-16): ott minden témakör saját telített színt kap, ami vizuálisan "navigációs horgonyként" szolgál. Nálunk szándékosan visszafogottabb (ikon-kör + bal szegély-csík, nem teli színes kártya), hogy a meglévő, letisztult felület ne törjön meg - de a hat terület már színről is megkülönböztethető. */ --cat-chat: var(--accent); --cat-practice: #bc8cff; --cat-exam: #f778ba; --cat-own: #39c5cf; --cat-games: #f0883e; --cat-story: var(--yellow); } /* Opcionális világos téma – a sötét (alap) paletta CSS-változóinak felülírása, amikor a elemen data-theme="light" van (lásd theme.js). */ html[data-theme="light"] { color-scheme: light; --bg: #ffffff; --surface: #f6f8fa; --surface2: #eaeef2; --border: #d0d7de; --accent: #0969da; --green: #1a7f37; --yellow: #9a6700; --red: #cf222e; --text: #1f2328; --muted: #6e7781; --teacher-bg: #eef1f4; --student-bg: #0969da14; --student-border: #0969da33; --accent-contrast: #ffffff; --cat-chat: var(--accent); --cat-practice: #8250df; --cat-exam: #bf3989; --cat-own: #0598a0; --cat-games: #bc4c00; --cat-story: var(--yellow); } /* iOS-stílusú, letisztult, egységes világos téma. Csak szín/CSS-változó szintű felülírás – a rendszer-betűtípus (-apple-system) már alapból be van állítva a body-n, ezért itt nem kell komponens-szintű stílust bántani. */ html[data-theme="ios"] { color-scheme: light; --bg: #f2f2f7; --surface: #ffffff; --surface2: #f2f2f7; --border: #e5e5ea; --accent: #007aff; --green: #34c759; --yellow: #ff9500; --red: #ff3b30; --text: #1c1c1e; --muted: #8e8e93; --teacher-bg: #f2f2f7; --student-bg: #007aff14; --student-border: #007aff33; --accent-contrast: #ffffff; --cat-chat: var(--accent); --cat-practice: #af52de; --cat-exam: #ff2d55; --cat-own: #30b0c7; --cat-games: #a2845e; --cat-story: var(--yellow); } .theme-toggle-icon { display: inline-block; } .theme-toggle-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; padding: 5px 10px; font-size: 14px; line-height: 1; flex-shrink: 0; } .theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle-fixed { position: fixed; top: 12px; right: 12px; z-index: 50; background: var(--surface); }