/* ============================================================================= TEMA (aistat) — PROJEKTENKENT EZT CSERELED. Csak szin/szinvilag; meret/layout SOHA. A slot-NEVEK (--brand-indigo, --brand-cyan, ...) torteneti okbol allandoak — az app.css ezekre hivatkozik. A markavaltas = az ERTEKEK csereje. aistat-identitas: hideg, mely ejkek alap + EGY eros kiemelo (azur) az adatnak. Szignatura-gradiens: azur -> teal ("adat-folyam"). A zold/borostyan CSAK szemantika. ============================================================================= */ :root { /* ---------- Marka-paletta (aistat) ---------- */ --brand-indigo: #0ea5e9; /* AZUR — az elsodleges kiemelo (slot-nev torteneti) */ --brand-cyan: #2dd4bf; /* TEAL — bevetel/pozitiv adat-hang */ --brand-violet: #818cf8; /* PERIWINKLE — aktivitas-piller akcent */ --brand-pink: #f472b6; /* MAGENTA — ritka mikro-akcent */ --brand-green: #22c55e; /* yes/aktiv szemantika: pipa, elo-statusz */ --brand-amber: #f59e0b; /* figyelem-szemantika */ /* A GOMB-primary tudatosan MELYEBB azur, mint az identitas-azur: feher szoveggel WCAG AA (4.5:1) — a fenyes azur a gradiensekben es a sotet temaban ragyog. */ --color-primary: #0284c7; --color-primary-rgb: 2, 132, 199; --color-primary-contrast: #ffffff; --accent: var(--brand-indigo); /* szekcionkent felulirhato: .section--cyan stb. */ /* ---------- Szemantikus ---------- */ --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #0891b2; /* ---------- VILAGOS tema (belso, uzleti felulet: attekintheto, hideg-tiszta) ---------- */ --bg: #f3f6fa; --surface: #ffffff; --surface-2: #e9eef5; --border: #dbe3ec; --text: #0f1b2d; --text-muted:#54637b; --heading: #0a1424; --overlay: rgba(7, 14, 28, 0.60); /* modal/backdrop sotetites — mindket teman sotet reteg */ /* Marka-szignatura: EGYETLEN koherens gradiens (azur -> teal) minden identitas-elemre (hero grad-text, elsodleges CTA-k, CTA-sav, marka-jel). A grad-cool (azur -> periwinkle) a masodlagos "adat" mikro-akcent (pl. demo-oszlopok). */ --grad-brand: linear-gradient(120deg, var(--brand-indigo), var(--brand-cyan)); --grad-cool: linear-gradient(120deg, var(--brand-indigo), var(--brand-violet)); } /* ---------- SOTET tema (landing: wow, melysegi ejkek) ---------- A landing ala kerul. Ugyanaz a marka, sotet retegen. A [data-bs-theme="dark"] szelektor is ide kotve: igy a alatt a Tabler-valtozok (:root mapping lent) mar a sotet ertekekre oldodnak fel. */ [data-bs-theme="dark"], .page-dark { --bg: #071120; --bg-2: #0b1830; --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.02); --border: rgba(255, 255, 255, 0.09); --text: #d9e6f2; --text-muted:#9db0c8; --heading: #eef6fd; /* Sotet retegen a fenyes azur kap primary-szerepet is: sotet szoveggel eros kontraszt. */ --color-primary: var(--brand-indigo); --color-primary-rgb: 14, 165, 233; --color-primary-contrast: #051220; } /* Per-szekcio akcentszin (keret-primitivek). A LANDING ezekbol TUDATOSAN csak a ket szignatura-hangot (azur=indigo-slot, teal=cyan-slot) valtogatja -> koherens ritmus, nem szivarvany. A green/amber a landingen CSAK szemantika (pipa, elo-statusz). */ .section--indigo { --accent: var(--brand-indigo); } .section--cyan { --accent: var(--brand-cyan); } .section--violet { --accent: var(--brand-violet); } .section--green { --accent: var(--brand-green); } .section--pink { --accent: var(--brand-pink); } .section--amber { --accent: var(--brand-amber); } /* Semleges melyseg-sav: a szekciokat NEM eltero szinnel, hanem finom melyseggel valasztjuk el (vilagos teman sotet, sotet teman vilagos, halvany lift) — hue-semleges, ezert koherens. */ .section--band { background: color-mix(in srgb, var(--text) 3%, transparent); } /* ---------- Tabler valtozok rakotese a temara ---------- */ :root { --tblr-primary: var(--color-primary); --tblr-primary-rgb: var(--color-primary-rgb); --tblr-body-bg: var(--bg); --tblr-body-color: var(--text); --tblr-border-color: var(--border); --tblr-font-sans-serif: var(--font-body); --tblr-body-font-family: var(--font-body); --tblr-body-font-size: 1rem; /* min 16px — Tabler 14px alapot feluliruk */ --tblr-border-radius: var(--radius-md); --tblr-card-border-radius: var(--radius-lg); }