/* Conclude design tokens v1.0.0 — 2026-10-12
   Forrás: kisarculat v0.3 — eszkozok/tokens_gen.js. Ne kézzel szerkeszd: a generátor írja.
   Használat: <link rel="stylesheet" href="conclude-fonts.css"> (saját hosztolású betűk, OFL — a Google Fonts link a weboldalból kimarad: EU-adatvédelem), utána <link rel="stylesheet" href="conclude-tokens.css">.
   Téma: alapból világos; sötét: <html data-theme="dark">, vagy a rendszer-beállítás (prefers-color-scheme), ha nincs data-theme="light".
   Betűk: https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;600&family=Source+Sans+3:wght@400;600&family=IBM+Plex+Mono:wght@400;600&display=swap */

:root {
  /* szín — világos */
  --bg: #FCFCFB; /* lap háttere */
  --surf: #FFFFFF; /* kártya, panel */
  --surf2: #F3F2EF; /* hover, csoport, kiemelt sor */
  --line: #D6D3CD; /* hajszálvonal, keret */
  --line2: #B9B4AB; /* erős vonal, másodlagos gomb kerete */
  --ink: #1C2126; /* szöveg */
  --mute: #5C6670; /* halvány szöveg, felirat (≥ 4,5:1) */
  --brand: #931133; /* klárét — elsődleges gomb, kiemelés, hiba nem! */
  --brand2: #6E0C26; /* klárét hover/nyomott */
  --brandS: #F3E6EA; /* lágy klárét felület — kijelölés, jelvény */
  --brand-alt: #B9924C; /* arany — hajszálvonal, eyebrow, kiemelt állapot; sötéten a jel és a tagline az ünnepi helyeken */
  --ok: #2F7A45; /* siker */
  --warn: #86590C; /* figyelem */
  --err: #B3261E; /* hiba (nem a klárét!) */
  --focus: #B9924C; /* fókusz-keret (arany, 2 px) */
  --cl-mark: #931133; /* a fejléc logójának jele (sötéten elefántcsont — felület) */
  --cl-word: #1C2126; /* a fejléc szóvédjegye */
  --cl-tag: #6B7178; /* tagline (a fejlécből kimarad) */
  /* betű */
  --ff-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --ff-sans: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --ff-mono: 'IBM Plex Mono', Consolas, monospace; /* csak azonosítókra */
  --ff-num: 'Source Sans 3', 'Segoe UI', Arial, sans-serif; /* számok a felületen (tnum lnum, 600) */
  --ff-num-display: 'EB Garamond', Georgia, 'Times New Roman', serif; /* kiemelt ár (tnum lnum, 600) */
  --fs-xs: 12px; --lh-xs: 1.4;
  --fs-sm: 14px; --lh-sm: 1.45;
  --fs-md: 15px; --lh-md: 1.5;
  --fs-body: 17px; --lh-body: 1.6;
  --fs-lead: 20px; --lh-lead: 1.5;
  --fs-h4: 18px; --lh-h4: 1.3;
  --fs-h3: 22px; --lh-h3: 1.25;
  --fs-h2: 28px; --lh-h2: 1.2;
  --fs-h1: 36px; --lh-h1: 1.12;
  --fs-display: 44px; --lh-display: 1.1;
  --fs-num: 15px; --lh-num: 1.3;
  --fs-num-lg: 25px; --lh-num-lg: 1.15;
  --fs-id: 13px; --lh-id: 1.3;
  /* térköz (px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  /* lekerekítés, vonal */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-pill: 999px;
  --line-hair: 1px;
  --line-strong: 2px;
  --line-focus: 2px;
  /* árnyék */
  --sh-card: 0 1px 2px rgba(28,33,38,.06);
  --sh-pop: 0 8px 24px rgba(28,33,38,.12);
  /* méretek */
  --sz-header: 72px;
  --sz-header-compact: 48px;
  --sz-header-mobile: 56px;
  --sz-logo-header: 36px;
  --sz-logo-mobile: 28px;
  --sz-touch: 44px;
  --sz-input: 40px;
  --sz-container: 1180px;
  --sz-gutter: 16px;
  color-scheme: light;
}

/* sötét téma — tintasötét (döntés 2026-10-29; a világos tinta #1C2126 sötét változata; 10-12–10-28: padlizsán-grafit) */
:root[data-theme="dark"] {
  --bg: #1A1F24; /* lap háttere */
  --surf: #222830; /* kártya, panel */
  --surf2: #2B323A; /* hover, csoport, kiemelt sor */
  --line: #39414A; /* hajszálvonal, keret */
  --line2: #525B65; /* erős vonal, másodlagos gomb kerete */
  --ink: #F2F0EC; /* szöveg */
  --mute: #A7ADB3; /* halvány szöveg, felirat (≥ 4,5:1) */
  --brand: #B8294A; /* klárét — elsődleges gomb, kiemelés, hiba nem! */
  --brand2: #9E2340; /* klárét hover/nyomott */
  --brandS: #3A2A33; /* lágy klárét felület — kijelölés, jelvény */
  --brand-alt: #CDB47A; /* arany — hajszálvonal, eyebrow, kiemelt állapot; sötéten a jel és a tagline az ünnepi helyeken */
  --ok: #7FB58A; /* siker */
  --warn: #D9A85A; /* figyelem */
  --err: #EA6E80; /* hiba (nem a klárét!) */
  --focus: #CDB47A; /* fókusz-keret (arany, 2 px) */
  --cl-mark: #F2EEE4; /* a fejléc logójának jele (sötéten elefántcsont — felület) */
  --cl-word: #F2EEE4; /* a fejléc szóvédjegye */
  --cl-tag: #A7ADB3; /* tagline (a fejlécből kimarad) */
  --sh-card: 0 1px 2px rgba(0,0,0,.25);
  --sh-pop: 0 8px 24px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #1A1F24; /* lap háttere */
  --surf: #222830; /* kártya, panel */
  --surf2: #2B323A; /* hover, csoport, kiemelt sor */
  --line: #39414A; /* hajszálvonal, keret */
  --line2: #525B65; /* erős vonal, másodlagos gomb kerete */
  --ink: #F2F0EC; /* szöveg */
  --mute: #A7ADB3; /* halvány szöveg, felirat (≥ 4,5:1) */
  --brand: #B8294A; /* klárét — elsődleges gomb, kiemelés, hiba nem! */
  --brand2: #9E2340; /* klárét hover/nyomott */
  --brandS: #3A2A33; /* lágy klárét felület — kijelölés, jelvény */
  --brand-alt: #CDB47A; /* arany — hajszálvonal, eyebrow, kiemelt állapot; sötéten a jel és a tagline az ünnepi helyeken */
  --ok: #7FB58A; /* siker */
  --warn: #D9A85A; /* figyelem */
  --err: #EA6E80; /* hiba (nem a klárét!) */
  --focus: #CDB47A; /* fókusz-keret (arany, 2 px) */
  --cl-mark: #F2EEE4; /* a fejléc logójának jele (sötéten elefántcsont — felület) */
  --cl-word: #F2EEE4; /* a fejléc szóvédjegye */
  --cl-tag: #A7ADB3; /* tagline (a fejlécből kimarad) */
  --sh-card: 0 1px 2px rgba(0,0,0,.25);
  --sh-pop: 0 8px 24px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

/* alap — a tokenek használatának minimuma */
html { background: var(--bg); color: var(--ink); font-family: var(--ff-sans); font-size: var(--fs-md); line-height: var(--lh-md); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--ff-serif); font-weight: 600; color: var(--ink); margin: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.display { font-family: var(--ff-serif); font-weight: 600; font-size: var(--fs-display); line-height: var(--lh-display); }
.num { font-family: var(--ff-num); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.num-lg { font-family: var(--ff-num-display); font-weight: 600; font-size: var(--fs-num-lg); line-height: var(--lh-num-lg); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.id { font-family: var(--ff-mono); font-size: var(--fs-id); }
.eyebrow { font-family: var(--ff-sans); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-alt); display: inline-block; } /* 2026-10-29: 14 px, .12em, aláhúzás nélkül (Greg; Dani UX-auditja: aláhúzva linknek látszott) */
.mute { color: var(--mute); }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: var(--line-focus) solid var(--focus); outline-offset: 2px; }
hr { border: 0; border-top: var(--line-hair) solid var(--line); }
@media (max-width: 900px) { :root { --fs-display: 40px; --fs-h1: 32px; } }
@media (max-width: 600px) { :root { --fs-display: 32px; --fs-h1: 28px; --fs-h2: 24px; --fs-body: 16px; } }