/* ═══════════════════════════════════════════════════════════════════
   KomfortMűhely — Hulladékhő · Design tokenek
   ───────────────────────────────────────────────────────────────────
   Ez a kanonikus token-készlet. A valódi alkalmazás ugyanezt a fájlt
   tölti be (`/assets/tokens.css`), a design system preview-i pedig
   inline-olják — így a bemutatott és a leszállított felület
   garantáltan ugyanabból a forrásból él.

   A két márkaszín a KomfortMűhely meglévő arculatából jön:
     #7BBA40  a KM zöld
     #323D37  a KM sötét

   MINDEN színérték WCAG-ellenőrzött. A kontraszt-adat a
   neve mellett áll — ez nem dekoráció, hanem használati szabály.
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Zöld skála — a márkaszínből levezetve ──────────────────────
     FIGYELEM: a márka zöld (zold-400) fehéren csak 2,35:1. Ez
     FELÜLETSZÍN, nem szövegszín. Szöveghez és linkhez a zold-600
     való (5,05:1). Ez a leggyakoribb hiba a KM-felületeken. */
  --zold-50:  #f3f8ed;   /* legvilágosabb háttér */
  --zold-100: #e3f0d6;   /* kiemelt blokk háttere */
  --zold-200: #c7e2ae;   /* keret, elválasztó */
  --zold-300: #a5d180;   /* sötét felületen szöveg (6,47:1) */
  --zold-400: #7BBA40;   /* ★ MÁRKASZÍN — felület, sáv, jelölő. Fehéren 2,35:1 → nem szöveg */
  --zold-500: #6aa536;   /* hover felületen */
  --zold-600: #507a28;   /* ★ szöveg, link fehéren (5,05:1) */
  --zold-700: #3d5e1f;   /* erős szöveg (7,45:1) */
  --zold-800: #2d4517;   /* címsor-kiemelés (10,63:1) */

  /* ── Sötét skála — a szerkezeté ────────────────────────────────── */
  --sotet-900: #1b231e;
  --sotet-800: #232d26;
  --sotet-700: #323D37;  /* ★ MÁRKA SÖTÉT — fejléc, lábléc (fehér szöveggel 11,3:1) */
  --sotet-600: #44524b;
  --sotet-500: #5d6d64;  /* másodlagos szöveg (5,47:1) */
  --sotet-400: #7f8f85;  /* halk szöveg, csak nagy méretben (3,40:1) */
  --sotet-300: #a8b4ac;  /* keret */
  --sotet-200: #ccd4cf;  /* vonal, elválasztó */
  --sotet-100: #e6eae7;  /* halvány háttér */
  --sotet-50:  #f4f7f5;  /* lapháttér */
  --feher:     #ffffff;

  /* ── Hő akcentus — a hulladékhő ábrázolásához ──────────────────── */
  --ho-600: #9a4a0f;     /* szöveg (6,25:1) */
  --ho-500: #c2600f;     /* UI-elem, nagy szöveg (4,22:1) */
  --ho-400: #e2801f;     /* felület, ábra */
  --ho-100: #fdecd8;     /* háttér */

  /* ── Víz akcentus — a termálvíz ábrázolásához ──────────────────── */
  --viz-600: #1a5f82;    /* szöveg (6,99:1) */
  --viz-500: #2080ab;    /* UI-elem (4,43:1) */
  --viz-400: #3ca3d1;    /* felület, ábra */
  --viz-100: #dff0f8;    /* háttér */

  /* ── Státusz — fenntartott, soha nem „negyedik sorozatszín" ───── */
  --siker:           #2f7d32;
  --siker-hatter:    #e8f5e9;
  --figyelem:        #9a6b00;
  --figyelem-hatter: #fdf3dc;
  --hiba:            #b02a2a;
  --hiba-hatter:     #fbe9e9;
  --info:            #1f6fa8;
  --info-hatter:     #e7f0f7;

  /* ── Szerepkörök — a komponensek EZEKET használják ─────────────── */
  --felulet:          var(--feher);
  --felulet-halk:     var(--sotet-50);
  --felulet-kiemelt:  var(--zold-50);
  --lap-hatter:       var(--sotet-50);

  --szoveg:           var(--sotet-900);
  --szoveg-masodlagos: var(--sotet-500);
  --szoveg-halk:      var(--sotet-400);
  --szoveg-inverz:    var(--feher);
  --szoveg-brand:     var(--zold-600);

  --keret:            var(--sotet-200);
  --keret-eros:       var(--sotet-300);
  --keret-fokusz:     var(--zold-500);

  /* ── Tipográfia ────────────────────────────────────────────────── */
  /* Rendszerbetűk: nincs külső letöltés, így a nyomtatott dokumentum
     és a szigorú CSP is működik. A modern érzetet a skála, a súlyok és
     a betűköz adja, nem egy letöltött betűcsalád. */
  --betu: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --betu-szam: "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* 1.25-ös (nagy terc) skála, 16 px alapról */
  --meret-2xs: 0.694rem;   /* 11,1 px — lábléc apróbetű */
  --meret-xs:  0.8rem;     /* 12,8 px — címke, súgó */
  --meret-s:   0.9rem;     /* 14,4 px — másodlagos */
  --meret-m:   1rem;       /* 16 px   — törzsszöveg */
  --meret-l:   1.25rem;    /* 20 px   — bevezető */
  --meret-xl:  1.563rem;   /* 25 px   — h3 */
  --meret-2xl: 1.953rem;   /* 31,2 px — h2 */
  --meret-3xl: 2.441rem;   /* 39 px   — h1 */
  --meret-4xl: 3.052rem;   /* 48,8 px — hero */
  --meret-5xl: 3.815rem;   /* 61 px   — kiemelt szám */

  --suly-normal: 400;
  --suly-kozep:  500;
  --suly-felkover: 600;
  --suly-kover:  700;

  --sorkoz-szoros: 1.15;   /* nagy címsor */
  --sorkoz-cim:    1.25;
  --sorkoz-alap:   1.6;    /* törzsszöveg */
  --sorkoz-laza:   1.75;   /* hosszú bekezdés */

  --betukoz-cim:  -0.02em; /* nagy címsorok tömörítése */
  --betukoz-alap: 0;
  --betukoz-kiskapitalis: 0.06em;

  /* ── Térköz — 4 px alapú ───────────────────────────────────────── */
  --ter-1:  4px;
  --ter-2:  8px;
  --ter-3:  12px;
  --ter-4:  16px;
  --ter-5:  20px;
  --ter-6:  24px;
  --ter-8:  32px;
  --ter-10: 40px;
  --ter-12: 48px;
  --ter-16: 64px;
  --ter-20: 80px;
  --ter-24: 96px;

  /* ── Űrlapmező ─────────────────────────────────────────────────── */
  /* EGY szélesség minden beviteli mezőre. A szám+mértékegység páros is
     ennyi: így az egymás alatti mezők jobb széle egy vonalba esik,
     akkor is, ha az egyiken van egység, a másikon nincs. */
  --mezo-szel: 480px;
  /* A mértékegység-doboz szélessége — fix feliratnál és választónál
     EGYFORMA, különben a számbeviteli rész szélessége mezőnként
     ingadozna (mértük: 388 px a „°C" mellett, 368 px a választó
     mellett). A 7rem a leghosszabb választóhoz (m³/nap + nyíl) kell. */
  --egyseg-szel: 7rem;

  /* ── Sugár ─────────────────────────────────────────────────────── */
  --sugar-s:  6px;
  --sugar-m:  10px;
  --sugar-l:  16px;
  --sugar-xl: 24px;
  --sugar-kor: 999px;

  /* ── Árnyék — halk, rétegzett ──────────────────────────────────── */
  --arnyek-1: 0 1px 2px rgba(27, 35, 30, .06);
  --arnyek-2: 0 1px 2px rgba(27, 35, 30, .06), 0 4px 12px rgba(27, 35, 30, .07);
  --arnyek-3: 0 2px 4px rgba(27, 35, 30, .07), 0 12px 28px rgba(27, 35, 30, .10);
  --arnyek-4: 0 4px 8px rgba(27, 35, 30, .08), 0 24px 56px rgba(27, 35, 30, .14);
  --arnyek-fokusz: 0 0 0 3px rgba(123, 186, 64, .35);

  /* ── Mozgás ────────────────────────────────────────────────────── */
  --ido-gyors:  120ms;
  --ido-alap:   200ms;
  --ido-lassu:  320ms;
  --gorbe: cubic-bezier(.2, .7, .3, 1);

  /* ── Szerkezet ─────────────────────────────────────────────────── */
  --tartalom-max:  1180px;
  --olvasas-max:   760px;   /* hosszú szöveg sorhossza */
  --fejlec-magas:  76px;
  --lablec-magas:  92px;    /* a FIX lábléc helye — a body ezzel számol */
}

/* A mozgás csökkentését kérő látogatóknál nincs animáció. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}