/*
 * Hergroup arculat -- forras: www.hergroup.hu, kimerve 2026-08-11, ujramerve 2026-09-15
 * (byte-ra egyezik). Lasd store/briefs/hergroup-on-arculat-frontend.md a szinek/betuk
 * selector-szintu igazolasahoz.
 *
 * A #E30613 / #FBBA00 / #FF4B21 SZANDEKOSAN NINCS itt -- azok beszallitoi markaszinek
 * (SAPELI, WO&WO, COMPACFOAM) a honlapon, nem a Hergroup sajat szine.
 */

@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/lato-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Lato Bold NINCS a honlapon (mert nincs fajlja) -- felkover torzsszoveghez
   szintetikus felkover (a bongeszo generalja) vagy Oswald hasznalando, SOHA ne
   hivatkozz nem letezo lato-bold fajlra: a 404 HTML-t ad vissza, nem hibat. */

:root {
  --brand-green: #5AC0A0;
  --brand-navy: #002E5E;
  --brand-navy-2: #00275B;
  --brand-plum: #804B75;
  --text-dark: #363636;
  --text-mid: #606060;
  --text-light: #404040;
  --surface-white: #FFFFFF;
  --surface-1: #F2F2F2;
  --surface-2: #F1F1F1;
  --surface-3: #E8E8E8;
  /* c213d53c, Péter 2945/2958/2959/2971: the bubbly look (design-tervezet-2). Shape, surfaces and the logo mark's colours
     (b44e6864). Status colours are separate from the logo. Text on teal/coral fills is navy (white: 2.2:1 / 3.2:1),
     white only on purple (6.1:1). Used by the .uj-megjelenes rules in app-shell.css. */
  --r-kartya: 22px; --r-kis: 16px; --r-pirula: 999px;
  --d-hatter: #F3F4F8; --d-kartya: #FFFFFF; --d-keret: #E6E8EE; --d-fej: #F7F8FB;
  --d-arnyek: 0 2px 6px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07);
  --d-arnyek-kicsi: 0 1px 3px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --d-turkiz: #58C1A2; --d-korall: #F06360; --d-lila: #835179;
  --d-turkiz-h: #E6F6F0; --d-korall-h: #FDECEB; --d-lila-h: #F3EAF1;
  --d-ok: #1F8F5A; --d-figy: #D98E04; --d-hiba: #C42B1C; --d-info: #2F6FB3; --d-semleges: #8A94A6;
}

body {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-dark);
  background: var(--surface-1);
}

.brand-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.brand-header img { height: 28px; display: block; }

h1, h2, h3, .section-title {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  font-weight: 700;
}

/* A szekciocim alatti vekony zold vonal -- visszatero motivum a honlaprol,
   5-15% szelessegben (itt 60px, tipikusan e sav alatt marad egy munkafeluleti
   szoveg-oszlopon). */
.section-title { position: relative; padding-bottom: 10px; margin-bottom: 8px; }
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 60px;
  height: 1px;
  background: var(--brand-green);
}

.sub, .sav { color: var(--text-mid); }

/*
 * SZANDEKOS ELTERES A HONLAPTOL: a honlap zold gombjan a felirat feher
 * (merve 2,21:1 -- a WCAG normal-szoveg minimuma 4,5:1). Egy 12px-es
 * munkafeluleti feliraton ez nem olvashato, ezert itt NAVY a felirat zold
 * hatteren (#002E5E a #5AC0A0-on = 6,11:1, ujramerve 2026-09-15). NE allitsd
 * vissza feherre "hibas atvetel" cimen -- ez tudatos dontes, nem hiba.
 */
.brand-on-green { background: var(--brand-green); color: var(--brand-navy); }

/* A konfliktus-jelzes (figyelmeztetes) SZANDEKOSAN marad a sajat narancs szinen
   (lasd tetelsorok.html .conflict-item), NEM a markaszinen -- ha a hibaüzenet es a
   markaszin ugyanaz, a statusz olvashatatlan lesz (brief, "Formai jegyek" utani szakasz). */