/* ==========================================================================
   CryptoAcademia – DESIGN-TOKENEK
   --------------------------------------------------------------------------
   A weboldal teljes vizuális alapja EBBEN az egy fájlban van: színek, betűk,
   betűméretek, térközök, vonalvastagságok. A többi CSS-fájl és minden widget
   csak ezekre a változókra hivatkozik (var(--…)), konkrét színkódot nem ír.
   Design-váltás = ennek a fájlnak a módosítása.
   Forrás: a cryptodetective.net vizuális nyelve (static/main.css).
   ========================================================================== */

:root {
  /* ── Alapszínek ─────────────────────────────────────────────── */
  --color-paper: #eeece6;           /* papírszínű háttér a rács alatt */
  --color-grid: rgba(0, 0, 0, 0.09);/* a 16 px-es négyzetrács vonala */
  --color-surface: #ffffff;         /* a fehér „kártya” */
  --color-surface-alt: #fafaf7;     /* halványabb felület (eredménydobozok, panelek) */
  --color-surface-sunken: #f4f2ec;  /* fejlécsávok, beüttetett mezők */
  --color-border: #c8c5bc;          /* vékony elválasztók */
  --color-border-strong: #aaa89e;   /* űrlapmezők kerete */
  --color-ink: #111110;             /* a „fekete”: szöveg, sötét sávok, gombkeretek */
  --color-text: #111110;
  --color-text-muted: #6b6b65;
  --color-text-dim: #9c9b92;
  --color-text-inverse: #f4f2eb;    /* szöveg sötét háttéren */
  --color-red: #98404a;             /* hiba, figyelmeztetés */
  --color-red-faded: #98404a1f;
  --color-green: #46724e;           /* siker, érvényes */
  --color-wip: #f6dede;             /* admin mód: félkész kártya halványpiros háttere */
  --color-wip-strong: #c26b74;      /* admin mód: félkész jelzések kerete, szaggatott vonalai */
  --color-review: #f8eec6;          /* admin mód: átnézendő kártya halványsárga háttere */
  --color-review-strong: #c99a16;   /* admin mód: átnézendő címke */
  --color-footer-bg: #111110;
  --color-footer-logo: #222222;       /* a lábléc nagy felirata nyugalomban (sötét a sötéten) */
  --color-footer-logo-light: #6c6c6c; /* kiemelve (egérrel fölötte) – a cryptodetective világosabb árnyalata */

  /* ── Kiemelőszín-paletta (témánként választható) ────────────── */
  --btc: #f08e19;  --btc-hover: #d67a0d;  --btc-text: #111110;  --btc-link: #a3610a;
  --btc-faded: #f08e191f;  --btc-faded-strong: #f08e1933;
  --eth: #4a4a82;  --eth-hover: #3d3d70;  --eth-text: #ffffff;  --eth-link: #4a4a82;
  --eth-faded: #4a4a821f;  --eth-faded-strong: #4a4a8233;
  --green: #46724e; --green-hover: #335439; --green-text: #ffffff; --green-link: #46724e;
  --green-faded: #46724e1f; --green-faded-strong: #46724e33;
  --brick: #98404a;  --brick-hover: #7a3139;  --brick-text: #ffffff;  --brick-link: #98404a;
  --brick-faded: #98404a1f;  --brick-faded-strong: #98404a33;
  --sea: #2f6f8f;  --sea-hover: #245a75;  --sea-text: #ffffff;  --sea-link: #2f6f8f;
  --sea-faded: #2f6f8f1f;  --sea-faded-strong: #2f6f8f33;
  --teal: #2b6d78; --teal-hover: #215660; --teal-text: #ffffff; --teal-link: #2b6d78;   /* Tranzakciók nyomon követése térkép: mély petrolkék */
  --teal-faded: #2b6d781f; --teal-faded-strong: #2b6d7833;
  --plum: #7a3f63; --plum-hover: #62314f; --plum-text: #ffffff; --plum-link: #7a3f63;   /* Kriptovaluta tárolása térkép: szilvalila */
  --plum-faded: #7a3f631f; --plum-faded-strong: #7a3f6333;
  --slate: #4d5f7a; --slate-hover: #3d4c63; --slate-text: #ffffff; --slate-link: #4d5f7a;
  --slate-faded: #4d5f7a1f; --slate-faded-strong: #4d5f7a33;
  --terracotta: #a85a3c; --terracotta-hover: #8a4630; --terracotta-text: #ffffff; --terracotta-link: #a85a3c;
  --terracotta-faded: #a85a3c1f; --terracotta-faded-strong: #a85a3c33;
  --mustard: #94741a; --mustard-hover: #7a600f; --mustard-text: #ffffff; --mustard-link: #94741a;
  --mustard-faded: #94741a1f; --mustard-faded-strong: #94741a33;
  --rose: #b0476f; --rose-hover: #933a5b; --rose-text: #ffffff; --rose-link: #b0476f;
  --rose-faded: #b0476f1f; --rose-faded-strong: #b0476f33;
  --graphite: #4a4d52; --graphite-hover: #383a3e; --graphite-text: #ffffff; --graphite-link: #4a4d52;
  --graphite-faded: #4a4d521f; --graphite-faded-strong: #4a4d5233;
  --brown: #7b5233; --brown-hover: #62412a; --brown-text: #ffffff; --brown-link: #7b5233;
  --brown-faded: #7b52331f; --brown-faded-strong: #7b523333;
  --grey: #68707a; --grey-hover: #565d66; --grey-text: #ffffff; --grey-link: #565d66;   /* semleges palack-szürke: az Extra tudás szakaszoké */
  --grey-faded: #68707a1f; --grey-faded-strong: #68707a33;

  /* ── Az AKTÍV kiemelőszín (alapból BTC-narancs) ─────────────── */
  --accent: var(--btc);
  --accent-hover: var(--btc-hover);
  --accent-text: var(--btc-text);        /* szöveg a kiemelőszínű háttéren */
  --accent-link: var(--btc-link);        /* link fehér háttéren (olvashatóbb, mint a sima narancs) */
  --accent-faded: var(--btc-faded);
  --accent-faded-strong: var(--btc-faded-strong);

  /* ── Betűk ──────────────────────────────────────────────────── */
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 24px;
  --fs-xl: 34px;
  --fs-xxl: 52px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  --lh-tight: 1.2;
  --lh-base: 1.6;
  --tracking-label: 0.06em;   /* kis nagybetűs feliratok */
  --tracking-wide: 0.15em;    /* fejléc-márkanév */

  /* ── Térközök (4 px-es lépték) ──────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Vonalak, sarkok, rács ──────────────────────────────────── */
  --line-thin: 1px;
  --line-medium: 2px;
  --line-thick: 3px;
  --radius: 0px;              /* szögletes sarkok mindenhol */
  --grid-size: 16px;

  /* ── Méretek ────────────────────────────────────────────────── */
  --page-max-width: 1440px;   /* a kártya legnagyobb szélessége */
  --reading-width: 760px;     /* kényelmesen olvasható szövegszélesség (pl. a 404-es oldalon) */
  --topic-width: 1200px;      /* a tudásoldal tartalmának legnagyobb szélessége (a lapon belül középre igazítva, oldalt margóval) */
  /* A lábléc és a felső sáv (térképjelző) egyforma magas. A lábléc felirata a szélességgel arányosan nő
     (a felirat képaránya 845,4 : 80), ezért a magasság is ebből számolódik, mindkettőnél ugyanígy.
     Mobilon legalább 52 px. (A felső sáv már nem ilyen magas, annak külön magassága van: --pager-height.) */
  --bar-box-height: max(52px, calc(100vw * 80 / 845.4));
  --pager-height: 56px;        /* a felső sáv (térképjelző) magassága, a színes csíkkal együtt; a cryptodetective-gomb ugyanilyen széles */

  /* ── Térkép (mindmap) ──────────────────────────────────── */
  --node-border: 3px;          /* a kártyák és a kinyitott tudásoldal vastag kerete */
  --connector: 3px;            /* az összekötő vonalak vastagsága */
  --connector-done: 6px;       /* a teljesített kártyáig vezető, kiszíneződő vonal vastagsága */
  --tree-gap: 28px;            /* a függőleges összekötők fél magassága (két szint között ennek kétszerese) */
  --tree-hgap: 10px;           /* vízszintes térköz a testvér-kártyák között (mindkét oldalon) */
  /* A kártyák 16:9 arányúak (2026-10-26, dia-mód): így a diák bélyegképei (szintén 16:9) 2×2-es, 3×3-as rácsban pontosan
     kitöltik őket. A magasság mindig a szélességből jön, a szélességet kell állítani. */
  --node-ratio: 16 / 9;
  --node-width-0: 384px;  --node-height-0: round(up, calc((var(--node-width-0) - 2 * var(--node-border)) * 9 / 16 + 7 / 4 * var(--slide-gap) + 2 * var(--node-border)), 1px);  --node-title-0: 34px;   /* gyökér téma (a térkép teteje) */
  --node-width-1: 272px;  --node-height-1: round(up, calc((var(--node-width-1) - 2 * var(--node-border)) * 9 / 16 + 7 / 4 * var(--slide-gap) + 2 * var(--node-border)), 1px);  --node-title-1: 24px;   /* 1. szint */
  --node-width-2: 224px;  --node-height-2: round(up, calc((var(--node-width-2) - 2 * var(--node-border)) * 9 / 16 + 7 / 4 * var(--slide-gap) + 2 * var(--node-border)), 1px);  --node-title-2: 19px;   /* 2. szinttől lefelé */
  /* Egy térkép fája asztalon kb. 5 „levél” szélességű lehet (5 × 244 px); ha szélesebb, a program arányosan kicsinyíti. */
  --veil-opacity: 0.6;         /* a tudásoldal mögötti halványító réteg erőssége (0 = nincs, 1 = teljesen eltakar) */
  --panel-inset: 24px;         /* a kinyitott tudásoldal bal és jobb oldali margója */
  /* A tudásoldal felső és alsó margója: pont akkora, hogy a lap a felső sáv betűit (és a cryptodetective-gomb D betűjét)
     teljesen kitakarja: a cryptodetective-gomb D betűjének teteje 9,0 px-nél kezdődik (ez a legmagasabb), a legmagasabb
     szövegsor 12,6 px-nél; 1 px ráhagyással 8 px. Alul ugyanennyi, hogy egységes legyen. Ha a sáv magassága vagy betűmérete változik, ezt újra be kell lőni. */
  --panel-inset-y: 8px;
  --color-scrim: rgba(17, 17, 16, 0.55);   /* a felugró ablakok mögötti sötétítés */
  --color-show-bg: #000000;    /* a vetítő mód háttere (dia-mód): teljesen fekete, mint a PowerPoint vetítése */
  --admin-bar-w: 92px;         /* az admin sáv (bal oldali, függőleges) szélessége – csak admin módban látszik */

  /* ── Tananyag ───────────────────────────────────────────────── */
  --fs-prose: 18px;            /* a tananyag folyószövege */
  --lh-prose: 1.7;
  --extra-accent: var(--grey);  /* az EXTRA TUDÁS szakaszok színe: semleges szürke, hogy semelyik téma (BTC, ETH, később újabbak) színével se ütközzön */
  --extra-text: var(--grey-text);
  --extra-faded: var(--grey-faded);

  /* ── Dia-mód (2026-10-26) ───────────────────────────────────── */
  /* A diák rögzített 16:9-es vászonra készülnek, és a vászon szélességéhez (cqw = a dia szélességének 1%-a) mérettel: ugyanaz a dia
     bélyegképként, nagyítva és vetítve is pontosan ugyanúgy néz ki. A méreteket itt kell állítani; a diák maguktól követik. */
  --sl-pad-x: 5cqw;            /* a dia oldalsó margója */
  --sl-pad-top: 3.8cqw;
  --sl-pad-bottom: 5.6cqw;     /* alul a kiemelőszínű sáv helye is benne van */
  --sl-gap: 2.4cqw;            /* a cím és a tartalom, illetve a területek közötti térköz */
  --sl-title: 4.7cqw;          /* a dia címe */
  --sl-title-big: 8.2cqw;      /* a címdia (title elrendezés) címe */
  --sl-text: 3.3cqw;           /* törzsszöveg, felsorolás */
  --sl-small: 2.3cqw;          /* feliratok, apró magyarázat */
  --sl-line: 0.34cqw;          /* a dobozok vastag keretének vastagsága (a kártyák 3 px-es keretének mása) */
  --sl-bar: 1.1cqw;            /* a dia alján a kiemelőszínű sáv magassága */
  --slide-gap: 5px;            /* a kártyán a bélyegképek közötti rés ÉS a rács margója a kártya keretétől: mindenhol ugyanennyi */
  --slide-thumb-line: 1.5px;   /* a bélyegképek kerete */

  /* ── Kvíz (2026-10-31) ──────────────────────────────────────── */
  --quiz-star: var(--mustard);  /* a bónuszcsillag (★) színe: az Extra tudásból szerzett jutalom */
  --green-hatch: #f1f6f2; --red-hatch: #fbf0f1;   /* a kvíz válaszainak halvány satírozása: tömör, világos árnyalatok (olvashatóságra állítva) */
  --quiz-gold-pale: #efd9a6;    /* halvány arany: a térképi jelzés (csillag + százalék) háttere */
  --quiz-star-gold: #d99c0f;    /* a térképi csillag töltése: élénk arany (fekete kerettel, így minden kártyaszínen jól látszik) */
  --quiz-timer-h: 8px;          /* a fogyó idővonal vastagsága */
    --quiz-pct-w: 56px; --quiz-pct-h: 32px;   /* a legjobb százalék téglalapja: fix méret (kétjegyű számnál is ugyanakkora)*/
  --quiz-badge-inset: 10px;      /* a csillag távolsága a kártya szélétől */

  /* ── Mozgás ─────────────────────────────────────────────────── */
  --dur-fast: 0.075s;
  --dur-base: 0.15s;
  --dur-slow: 0.25s;
  --dur-open-1: 260ms;         /* tudásoldal nyitása: 1. fázis (függőleges növekedés) */
  --dur-open-2: 300ms;         /* tudásoldal nyitása: 2. fázis (vízszintes növekedés) */
  --ease-open: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Közepes képernyőn (pl. kisebb laptop) kisebb kártyák. */
@media (max-width: 1200px) {
  :root {
    --node-width-0: 336px; --node-title-0: 30px;
    --node-width-1: 240px; --node-title-1: 21px;
    --node-width-2: 192px; --node-title-2: 17px;
    --tree-hgap: 8px;
  }
}

/* Mobilon kisebb a keret a kinyitott tudásoldal körül. (Töréspont: 700 px, lásd PROJECT.md) */
@media (max-width: 700px) {
  :root { --panel-inset: 8px; --fs-prose: 16px; --admin-bar-w: 44px; }
}

/* Témánkénti kiemelőszín: <html data-accent="eth"> (a sablonban: {% block accent %}eth{% endblock %}) */
[data-accent="eth"] {
  --accent: var(--eth);  --accent-hover: var(--eth-hover);  --accent-text: var(--eth-text);
  --accent-link: var(--eth-link);  --accent-faded: var(--eth-faded);  --accent-faded-strong: var(--eth-faded-strong);
}
[data-accent="teal"] {
  --accent: var(--teal);  --accent-hover: var(--teal-hover);  --accent-text: var(--teal-text);
  --accent-link: var(--teal-link);  --accent-faded: var(--teal-faded);  --accent-faded-strong: var(--teal-faded-strong);
}
[data-accent="plum"] {
  --accent: var(--plum);  --accent-hover: var(--plum-hover);  --accent-text: var(--plum-text);
  --accent-link: var(--plum-link);  --accent-faded: var(--plum-faded);  --accent-faded-strong: var(--plum-faded-strong);
}
[data-accent="green"] {
  --accent: var(--green);  --accent-hover: var(--green-hover);  --accent-text: var(--green-text);
  --accent-link: var(--green-link);  --accent-faded: var(--green-faded);  --accent-faded-strong: var(--green-faded-strong);
}
[data-accent="brick"] {
  --accent: var(--brick);  --accent-hover: var(--brick-hover);  --accent-text: var(--brick-text);
  --accent-link: var(--brick-link);  --accent-faded: var(--brick-faded);  --accent-faded-strong: var(--brick-faded-strong);
}
[data-accent="sea"] {
  --accent: var(--sea);  --accent-hover: var(--sea-hover);  --accent-text: var(--sea-text);
  --accent-link: var(--sea-link);  --accent-faded: var(--sea-faded);  --accent-faded-strong: var(--sea-faded-strong);
}
[data-accent="btc"] {
  --accent: var(--btc);  --accent-hover: var(--btc-hover);  --accent-text: var(--btc-text);
  --accent-link: var(--btc-link);  --accent-faded: var(--btc-faded);  --accent-faded-strong: var(--btc-faded-strong);
}
[data-accent="slate"] {
  --accent: var(--slate);  --accent-hover: var(--slate-hover);  --accent-text: var(--slate-text);
  --accent-link: var(--slate-link);  --accent-faded: var(--slate-faded);  --accent-faded-strong: var(--slate-faded-strong);
}
[data-accent="terracotta"] {
  --accent: var(--terracotta);  --accent-hover: var(--terracotta-hover);  --accent-text: var(--terracotta-text);
  --accent-link: var(--terracotta-link);  --accent-faded: var(--terracotta-faded);  --accent-faded-strong: var(--terracotta-faded-strong);
}
[data-accent="mustard"] {
  --accent: var(--mustard);  --accent-hover: var(--mustard-hover);  --accent-text: var(--mustard-text);
  --accent-link: var(--mustard-link);  --accent-faded: var(--mustard-faded);  --accent-faded-strong: var(--mustard-faded-strong);
}
[data-accent="rose"] {
  --accent: var(--rose);  --accent-hover: var(--rose-hover);  --accent-text: var(--rose-text);
  --accent-link: var(--rose-link);  --accent-faded: var(--rose-faded);  --accent-faded-strong: var(--rose-faded-strong);
}
[data-accent="graphite"] {
  --accent: var(--graphite);  --accent-hover: var(--graphite-hover);  --accent-text: var(--graphite-text);
  --accent-link: var(--graphite-link);  --accent-faded: var(--graphite-faded);  --accent-faded-strong: var(--graphite-faded-strong);
}
[data-accent="brown"] {
  --accent: var(--brown);  --accent-hover: var(--brown-hover);  --accent-text: var(--brown-text);
  --accent-link: var(--brown-link);  --accent-faded: var(--brown-faded);  --accent-faded-strong: var(--brown-faded-strong);
}