/* =========================================================
segitekneki.hu – design tokenek (v1.0, 2026. október 13.)
Lecseréli a v0.1-es erdőzöld tokeneket. A szemantikus nevek (--color-*)
ugyanazok maradtak, így a komponenseket nem kell átírni.
Komponensekben CSAK a szemantikus tokeneket használd, a nyers palettát
(--pal-*) ne, mert így működik a sötét mód.
Betűk (Google Fonts):
A felirat (logó) NE élő szöveg legyen: használd a brand/wordmark-*.svg fájlt.
Kontrasztok: WCAG 2 képlettel számolva.
========================================================= */
:root {
/* ---- Nyers paletta ---- */
/* Lila – elsődleges */
--pal-lila-900: #1C1236; /* éjlila: szöveg, sötét felület */
--pal-lila-700: #4A22C9; /* hover; fehér rajta 8,9:1 */
--pal-lila-600: #5B2EE5; /* FŐ SZÍN; fehér rajta 7,1:1 */
--pal-lila-300: #A98BFF; /* sötét módú elsődleges */
--pal-lila-200: #C8B6FF; /* levendula */
--pal-lila-100: #E6E0F5; /* keret */
--pal-lila-50: #F2EDFF; /* halvány lila alap; lila rajta 6,2:1 */
--pal-lila-25: #FBFAFF; /* oldal háttér */
/* Vajsárga – kiemelő FELÜLET (szövegszínnek soha) */
--pal-vaj-400: #FFE38A; /* lila rajta 5,6:1, éjlila rajta 14,0:1 */
--pal-vaj-100: #FFF6D9;
--pal-vaj-500: #F8CB45; /* telt hívógomb-sárga; éjlila rajta 11,9:1 */
--pal-vaj-600: #EDB92A; /* hívógomb hover */
/* 112 piros – kizárólag a 112-re és veszélyre */
--pal-red-700: #A51D1D;
--pal-red-600: #C62828; /* fehér rajta 5,6:1 */
--pal-red-50: #FDECEC;
/* ---- Szemantikus színek (világos) ---- */
--color-bg: var(--pal-lila-25);
--color-surface: #FFFFFF;
--color-surface-alt: var(--pal-lila-50);
--color-border: var(--pal-lila-100);
--color-border-strong: #8C82A8; /* 3,6:1 fehéren */
--color-text: var(--pal-lila-900); /* 17,0:1 a háttéren */
--color-text-muted: #4A4060; /* 9,2:1 a háttéren */
--color-primary: var(--pal-lila-600);
--color-primary-hover: var(--pal-lila-700);
--color-on-primary: #FFFFFF;
--color-primary-soft: var(--pal-lila-50);
--color-on-primary-soft: var(--pal-lila-600);
--color-accent: var(--pal-vaj-400); /* kiemelt kártya, sáv, jelvény alapja */
--color-accent-soft: var(--pal-vaj-100);
--color-on-accent: var(--pal-lila-900);
/* Hívás – CSAK a fő (első) hívógombra; a többi szám nem kap telt sárgát */
--color-call: var(--pal-vaj-500);
--color-call-hover: var(--pal-vaj-600);
--color-on-call: var(--pal-lila-900);
--color-danger: var(--pal-red-600);
--color-danger-hover: var(--pal-red-700);
--color-on-danger: #FFFFFF;
--color-danger-soft: var(--pal-red-50);
--color-on-danger-soft: var(--pal-red-700);
--color-focus: var(--pal-lila-600); /* fókuszgyűrű: 7,1:1 fehéren */
/* ---- Tipográfia ---- */
--font-display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif; /* címek 600/800 */
--font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
--fs-xs: 0.875rem; /* 14px – csak meta */
--fs-sm: 1rem; /* 16px */
--fs-base: 1.0625rem; /* 17px – törzsszöveg */
--fs-lg: 1.25rem; /* 20px – gombfelirat */
--fs-xl: 1.5rem; /* 24px – képernyőcím */
--fs-2xl: 1.875rem; /* 30px – hívószám */
--fw-regular: 400;
--fw-semibold: 600;
--fw-bold: 700;
--fw-display: 800;
--ls-display: -0.02em;
--lh-tight: 1.2;
--lh-base: 1.5;
/* ---- Térközök (4 px alap) ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
/* ---- Méretek ---- */
--touch-min: 48px;
--touch-lg: 64px;
--icon-sm: 24px;
--icon-md: 32px;
--icon-lg: 40px;
--content-max: 480px;
/* ---- Lekerekítés ---- */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 999px;
/* ---- Szegély, árnyék, mozgás ---- */
--border-w: 1.5px;
--focus-ring: 0 0 0 3px var(--color-focus);
--shadow-1: 0 1px 2px rgb(28 18 54 / 0.08), 0 1px 1px rgb(28 18 54 / 0.04);
--shadow-2: 0 4px 12px rgb(28 18 54 / 0.10);
--dur-fast: 120ms;
--ease: cubic-bezier(.2, .7, .3, 1);
}
/* ---- Sötét mód: rendszerbeállítás szerint, vagy data-theme="dark" ---- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-bg: #120B24; --color-surface: #1C1236; --color-surface-alt: #2A1D52;
--color-border: #3A2D66; --color-border-strong: #8C82A8;
--color-text: #F2EDFF; /* 16,7:1 */
--color-text-muted: #B9AEDB; /* 9,2:1 */
--color-primary: var(--pal-lila-300); --color-primary-hover: #BBA3FF;
--color-on-primary: var(--pal-lila-900); /* 6,6:1 */
--color-primary-soft: #2A1D52; --color-on-primary-soft: #F2EDFF;
--color-accent: var(--pal-vaj-400); --color-accent-soft: #3A3218; --color-on-accent: var(--pal-lila-900);
--color-danger: #D32F2F; --color-danger-hover: #E04444; /* fehér rajta 5,0:1 */
--color-danger-soft: #3B1C1C; --color-on-danger-soft: #FFB4AD;
--color-focus: var(--pal-lila-300);
--shadow-1: none; --shadow-2: 0 4px 16px rgb(0 0 0 / 0.4);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--color-bg: #120B24; --color-surface: #1C1236; --color-surface-alt: #2A1D52;
--color-border: #3A2D66; --color-border-strong: #8C82A8;
--color-text: #F2EDFF;
--color-text-muted: #B9AEDB;
--color-primary: var(--pal-lila-300); --color-primary-hover: #BBA3FF;
--color-on-primary: var(--pal-lila-900);
--color-primary-soft: #2A1D52; --color-on-primary-soft: #F2EDFF;
--color-accent: var(--pal-vaj-400); --color-accent-soft: #3A3218; --color-on-accent: var(--pal-lila-900);
--color-danger: #D32F2F; --color-danger-hover: #E04444;
--color-danger-soft: #3B1C1C; --color-on-danger-soft: #FFB4AD;
--color-focus: var(--pal-lila-300);
--shadow-1: none; --shadow-2: 0 4px 16px rgb(0 0 0 / 0.4);
color-scheme: dark;
}