/* ==========================================================================
   HP Fehérbeton-Bau — design tokens
   A színek, méretek és térközök EGYETLEN forrása. Komponens-CSS-ben
   közvetlen hexa- vagy px-érték nem szerepelhet, csak ezek a változók.
   Forrás: outputs/tervek/00-kozos-01-arculat-es-komponensek.md
   ========================================================================== */

:root {
  /* --- Színek (kötöttek, a látványtervből NEM mintavételezünk) ------------ */
  --color-dark: #191919;          /* fejléc, lábléc, oldalsáv */
  --color-dark-cta: #1D1D1D;      /* záró CTA — a 05-sotet-cta.webp tónusa */
  --color-surface: #FFFFFF;       /* főfelület */
  --color-alt: #F3F3F3;           /* váltakozó felület */
  --color-accent: #FF7A18;        /* narancs kiemelés, elsődleges gomb */
  --color-accent-hover: #E86A0C;
  --color-text: #242424;          /* szöveg, és narancs gombon a felirat */
  --color-text-strong: #141414;   /* címsor */
  --color-text-muted: #3A3A3A;    /* bevezető, kártyaszöveg */
  --color-text-faint: #8A8A8A;    /* finom kísérőszöveg */
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #C9C9C9;
  --color-divider-light: #DCDCDC;
  --color-divider: #BDBDBD;       /* erősebb elválasztó, kapcsoló kikapcsolt sávja */
  --color-divider-dark: rgba(255, 255, 255, 0.22);

  /* Sötét felületen (fejléc, oldalsáv) használt átlátszó fehér árnyalatok.
     Tokenként, hogy a belső keret mindenhol egyformán nézzen ki. */
  --color-on-dark-dim: rgba(255, 255, 255, 0.82);    /* menüpont szövege */
  --color-on-dark-faint: rgba(255, 255, 255, 0.38);  /* letiltott menüpont */
  --color-on-dark-ghost: rgba(255, 255, 255, 0.30);  /* „Hamarosan", szlogen */
  --color-dark-hover: rgba(255, 255, 255, 0.07);     /* rámutatás sötéten */
  --color-dark-raised: rgba(255, 255, 255, 0.12);    /* kiemelt folt sötéten */
  --color-scrim: rgba(0, 0, 0, 0.50);                /* fátyol a mobilmenü alatt */
  --color-hairline-dark: rgba(255, 255, 255, 0.10);
  --color-focus: #FF7A18;

  /* Állapotszínek. A jelentés soha nem múlik csak a színen: minden állapothoz
     ikon és szöveges magyarázat tartozik (00-kozos-01). */
  --color-error: #B3261E;
  --color-error-bg: #FDECEA;
  --color-success: #1B7F4B;
  --color-success-bg: #E9F5EE;
  --color-warning: #8A5A00;   /* fehéren 5,3:1 — olvasható, nem sárga folt */
  --color-warning-bg: #FDF3E2;

  /* --- Tipográfia -------------------------------------------------------- */
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-4xs: 0.6875rem;  /* 11px — logófelirat */
  --fs-3xs: 0.75rem;    /* 12px — hero kicker, lábléc szlogen */
  --fs-xs: 0.875rem;    /* 14px — szekciócímke (eyebrow) */
  --fs-sm: 1rem;        /* 16px — menü, lábléclink */
  --fs-base: 1.0625rem; /* 17px — törzsszöveg */
  --fs-md: 1.25rem;     /* 20px — sötét CTA bevezető */
  --fs-lead: 1.3125rem; /* 21px — hero bevezető */
  --fs-lg: 1.5rem;      /* 24px — kártyacím, lépéscím */
  --fs-xl: 1.875rem;    /* 30px — kártya sorszám */
  --fs-2xl: 2.375rem;   /* 38px — folyamat sorszám */

  --fs-h1: clamp(2.25rem, 5.6vw, 4.5rem);      /* 36 → 72px */
  --fs-h1-long: clamp(2.25rem, 5vw, 4rem);     /* 36 → 64px — hosszú, gombok nélküli hero */
  --fs-h2: clamp(2rem, 3.8vw, 3rem);           /* 32 → 48px */
  --fs-h2-cta: clamp(2rem, 4.4vw, 3.375rem);   /* 32 → 54px */

  --lh-tight: 1.04;
  --lh-title: 1.12;
  --lh-body: 1.6;

  --ls-eyebrow: 0.18em;
  --ls-claim: 0.22em;
  --ls-kicker: 0.24em;
  --ls-title: -0.02em;

  /* --- Térköz (8 px-es rendszer) ----------------------------------------- */
  --space-05: 0.25rem;  /*  4px */
  --space-1: 0.5rem;    /*  8px */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-5: 2.5rem;    /* 40px */
  --space-6: 3rem;      /* 48px */
  --space-7: 3.5rem;    /* 56px */
  --space-8: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */

  /* --- Elrendezés -------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: var(--space-6);
  --header-height: 72px;
  --section-gap: var(--space-12);

  /* --- Forma, mozgás ----------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --tap-target: 44px;
  --transition: 180ms ease;
  --transition-slow: 280ms ease;
}

@media (max-width: 1199px) {
  :root {
    --container-pad: var(--space-4);
    --section-gap: var(--space-10);
  }
}

@media (max-width: 767px) {
  :root {
    --container-pad: var(--space-3);
    --section-gap: var(--space-8);
    --header-height: 64px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: var(--space-2);
  }
}