/* Alap design tokenek - a vizuális tervdokumentáció szerint. Mindkét nézet (iroda, szerelő) ezt tölti be elsőként. */

:root {
  /* Márka / navigáció */
  --szin-nav: #12324a;            /* sötétkék oldalsáv, sötét felületek */
  --szin-cim: #12324a;            /* címek, kiemelt szöveg */
  --szin-marka: #f5a623;          /* márkajel / sárga akcentus (logó, figyelemfelhívás) */

  /* Elsődleges művelet (kék) */
  --szin-elsodleges: #2b6fe8;
  --szin-elsodleges-sotet: #1f5ac4;
  --szin-elsodleges-vilagos: #e7effd;

  /* Állapotszínek */
  --szin-siker: #2fa36b;
  --szin-siker-vilagos: #e3f3ec;
  --szin-veszely: #d9534f;
  --szin-veszely-vilagos: #fbeceb;
  --szin-figyelmeztetes: #b26a00;         /* olvasható amber szöveghez */
  --szin-figyelmeztetes-vilagos: #fdf1dd;
  --szin-info: #2b6fe8;
  --szin-info-vilagos: #e7effd;
  --szin-lila: #6a1b9a;                    /* időpont egyeztetve jelzés */
  --szin-lila-vilagos: #f1e6f7;

  /* Felületek / szöveg */
  --szin-alap: #f4f7fa;          /* oldalháttér */
  --szin-felulet: #ffffff;
  --szin-szoveg: #1f2d3d;
  --szin-szoveg-halvany: #64748b;
  --szin-szegely: #e2e8f0;

  --terkoz-1: 4px;
  --terkoz-2: 8px;
  --terkoz-3: 12px;
  --terkoz-4: 16px;
  --terkoz-5: 24px;
  --terkoz-6: 32px;
  --terkoz-7: 48px;

  --betumeret-sm: 13px;          /* segédszöveg */
  --betumeret-alap: 15px;        /* alapszöveg */
  --betumeret-lg: 19px;          /* szekciócím */
  --betumeret-xl: 28px;          /* oldalcím */

  --sarok-kicsi: 8px;
  --sarok-kozepes: 10px;
  --sarok-nagy: 14px;

  --arnyek-kartya: 0 1px 2px rgba(18, 50, 74, 0.05), 0 4px 12px rgba(18, 50, 74, 0.05);
  --erintes-min: 44px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--szin-alap);
  color: var(--szin-szoveg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--betumeret-alap);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--terkoz-3);
  line-height: 1.2;
  color: var(--szin-cim);
  font-weight: 700;
}

a { color: var(--szin-elsodleges); }

p { margin: 0 0 var(--terkoz-3); }

img { max-width: 100%; }