/* ============================================================
   A TELJES KINÉZET EGY HELYEN
   Ha színt, betűt, méretet vagy lekerekítést akarsz változtatni,
   CSAK ezt a fájlt kell átírnod. A többi fájl innen veszi az értékeket.

   Színkód formátum: #RRGGBB (pl. #FFD21F = taxisárga).
   Színválasztó: keress rá a Google-ben arra, hogy "color picker".

   Az oldal alapból SÖTÉT. A világos színek lejjebb vannak.
   ============================================================ */

/* ---------- Saját betűtípus (a saját szerverünkről, GDPR-barát) ---------- */
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ---------- Betűk ---------- */
  --betu: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --betu-cim: "Poppins", var(--betu);   /* címek betűtípusa */
  --betu-meret: 17px;                   /* alap betűméret */
  --sor-magassag: 1.6;
  --cim-suly: 700;                      /* címek vastagsága */
  --cim-nagybetus: uppercase;           /* nagybetűs címek; ha nem kell: none */

  /* ---------- Formák ---------- */
  --kerekites: 14px;           /* kártyák, dobozok sarka */
  --kerekites-kicsi: 10px;     /* gombok, mezők sarka */
  --tartalom-szelesseg: 720px; /* a szöveg maximális szélessége */
  --oldal-szelesseg: 1180px;   /* a teljes oldal maximális szélessége */

  /* ---------- SÖTÉT MÓD színei (ez az alap) ---------- */
  --szin-hatter: #0B1426;          /* az oldal háttere */
  --szin-felulet: #121E36;         /* kártyák, dobozok háttere */
  --szin-felulet-2: #182742;       /* kiemeltebb felület */
  --szin-szoveg: #EEF2FA;          /* fő szövegszín */
  --szin-szoveg-halvany: #A3B2CC;  /* másodlagos szöveg */
  --szin-vonal: #243553;           /* keretek, elválasztók */

  --szin-kiemelo: #FFD21F;         /* taxisárga: gombok, kiemelések */
  --szin-kiemelo-szoveg: #10151F;  /* szöveg a sárga háttéren */
  --szin-link: #FFD95A;            /* linkek színe */
  --szin-jel: #10151F;             /* a logó sötét része */
  --szin-ragyogas: rgba(255, 210, 31, .35); /* a sárga elemek fénye */
  --szin-rendben: #3DD68C;         /* "ellenőrizve" pipa színe */

  --szin-tipp: #12301F;       --szin-tipp-vonal: #3DD68C;
  --szin-figyelem: #3A1A1A;   --szin-figyelem-vonal: #FF6B5B;
  --szin-gyakorlat: #2E2710;  --szin-gyakorlat-vonal: #FFD21F;
  --szin-nyitott: #1B2640;    --szin-nyitott-vonal: #8EA0C2;

  --arnyek: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
}

/* ---------- VILÁGOS MÓD színei (a gombbal választható) ---------- */
:root[data-tema="vilagos"] {
  --szin-hatter: #F6F4EE;
  --szin-felulet: #FFFFFF;
  --szin-felulet-2: #EFEBE1;
  --szin-szoveg: #161A22;
  --szin-szoveg-halvany: #5A5F6B;
  --szin-vonal: #DFD9CB;
  --szin-kiemelo: #F6B400;
  --szin-kiemelo-szoveg: #161A22;
  --szin-link: #8A5300;
  --szin-jel: #161A22;
  --szin-ragyogas: rgba(246, 180, 0, .25);
  --szin-rendben: #1F8A55;
  --szin-tipp: #E8F3EC;       --szin-tipp-vonal: #2F8A55;
  --szin-figyelem: #FDECEA;   --szin-figyelem-vonal: #C4382B;
  --szin-gyakorlat: #FFF6D9;  --szin-gyakorlat-vonal: #D99A00;
  --szin-nyitott: #EEF0F4;    --szin-nyitott-vonal: #6B7383;
  --arnyek: 0 1px 2px rgba(22, 26, 34, .06), 0 6px 18px rgba(22, 26, 34, .07);
}