/* ==========================================================================
   znacenieproduktov.sk: dizajnové tokeny
   Jediný zdroj pravdy pre prototypy (design/prototypes) aj tému (theme/zp).
   Zdôvodnenie hodnôt: docs/rozhodnutia.md
   Plynulé hodnoty (clamp) škálujú lineárne medzi viewportom 375 px a 1440 px.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Farby */

  /* Značka: brand kit LIFTEC (docs/brand/brand-kit-liftec.pdf) */
  --color-brand:          #00b1e6; /* hlavná modrá: akcenty, CTA pás, čísla */
  --color-brand-light:    #62ccec; /* bledší odtieň */
  --color-brand-dark:     #007ea4; /* tmavší odtieň: modrý text a odkazy na bielom (4.65:1) */
  --color-brand-pale:     #c0eaf7; /* náhrada bielej: jemné podfarbenie */
  --color-navy:           #02252f; /* náhrada čiernej: text, tmavé sekcie */
  --color-black:          #000000; /* čierna pre lepší kontrast: pätička */
  --color-cta:            #a90d1a; /* akcentová farba: tlačidlá s výzvou (7.6:1 s bielou) */
  --color-brand-tint:     #f2fbfe; /* zvolená voľba vo formulári */
  --color-brand-glow:     rgb(0 177 230 / .15);

  /* Text (odtiene navy) */
  --color-ink:            var(--color-navy); /* hlavný text, nadpisy (16:1) */
  --color-text:           #354f57; /* lead, dlhší text (7.4:1 na surface) */
  --color-muted:          #536b72; /* sekundárny text, eyebrow, popisy (5:1 na surface) */

  /* Plochy */
  --color-bg:             #ffffff;
  --color-surface:        #eef2f3; /* hero, svetlé sekcie */
  --color-surface-2:      #f4f6f6; /* karty na bielom, striedanie sekcií */
  --color-line:           #d8dfe1; /* deliace čiary */
  --color-line-strong:    #b9c4c8; /* rámiky polí, ikon, čiary na surface */

  /* Tmavé sekcie */
  --color-dark:           var(--color-navy);
  --color-dark-2:         var(--color-black); /* plochy v tmavej sekcii */
  --color-footer:         var(--color-black);
  --color-dark-line:      rgb(255 255 255 / .16);
  --color-on-dark:        #ffffff;
  --color-on-dark-text:   rgb(255 255 255 / .74); /* odstavce na tmavom (9:1) */
  --color-on-dark-muted:  rgb(255 255 255 / .6);  /* eyebrow a popisky na tmavom (6.5:1) */

  /* Stavy */
  --color-success-bg:     #dff5ed;
  --color-focus:          var(--color-brand);

  /* ----------------------------------------------------------- Typografia */

  --font-sans: "Ubuntu", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Veľkosti: min pri 375 px, max pri 1440 px */
  --fs-display: clamp(3.5rem,    2.4437rem + 4.5070vw, 6.5rem);    /* 56 → 104: hero homepage a produktu */
  --fs-h1:      clamp(2.75rem,   2.0898rem + 2.8169vw, 4.625rem);  /* 44 → 74 */
  --fs-h2:      clamp(2.125rem,  1.7069rem + 1.7840vw, 3.3125rem); /* 34 → 53 */
  --fs-h3:      clamp(1.75rem,   1.4859rem + 1.1268vw, 2.5rem);    /* 28 → 40 */
  --fs-h4:      clamp(1.375rem,  1.2430rem + 0.5634vw, 1.75rem);   /* 22 → 28 */
  --fs-h5:      clamp(1.125rem,  1.0590rem + 0.2817vw, 1.3125rem); /* 18 → 21 */
  --fs-h6:      clamp(1rem,      0.9560rem + 0.1878vw, 1.125rem);  /* 16 → 18 */
  --fs-lead:    clamp(1.0625rem, 0.9965rem + 0.2817vw, 1.25rem);   /* 17 → 20 */
  --fs-body:    clamp(1rem,      0.9780rem + 0.0939vw, 1.0625rem); /* 16 → 17 */
  /* Najmenšie písmo na webe je 16 px (pripomienka Roba 29. 9. 2026) */
  --fs-small:   1rem;       /* 16: tlačidlá, popisy, zoznamy */
  --fs-caption: 1rem;       /* 16: pätička, tabuľky, meta */
  --fs-micro:   1rem;       /* 16: eyebrow, číslovanie, štítky; nikdy menej */
  --fs-nav:     0.9375rem;  /* 15: položky hlavného menu */

  --lh-display: 0.9;
  --lh-h1:      0.94;
  --lh-h2:      1.04;
  --lh-h3:      1.1;
  --lh-h4:      1.2;
  --lh-h5:      1.3;
  --lh-tight:   1.3;
  --lh-body:    1.6;
  --lh-lead:    1.55;
  --lh-prose:   1.72; /* dlhé články */

  --ls-display: -0.055em;
  --ls-h1:      -0.05em;
  --ls-h2:      -0.043em;
  --ls-h3:      -0.035em;
  --ls-h4:      -0.02em;
  --ls-normal:  0;
  --ls-eyebrow: 0.08em;

  --measure:      38em; /* max šírka odstavca */
  --measure-wide: 54em;

  /* -------------------------------------------------------------- Rozostupy */

  /* Pevná škála, základ 4 px */
  --space-1:  0.25rem; /*   4 */
  --space-2:  0.5rem;  /*   8 */
  --space-3:  0.75rem; /*  12 */
  --space-4:  1rem;    /*  16 */
  --space-5:  1.25rem; /*  20 */
  --space-6:  1.5rem;  /*  24 */
  --space-7:  2rem;    /*  32 */
  --space-8:  2.5rem;  /*  40 */
  --space-9:  3rem;    /*  48 */
  --space-10: 3.5rem;  /*  56 */
  --space-11: 4rem;    /*  64 */
  --space-12: 5rem;    /*  80 */
  --space-13: 6rem;    /*  96 */
  --space-14: 8rem;    /* 128 */

  /* Plynulé rozostupy rozloženia */
  --section-y: clamp(4rem,   3.2077rem + 3.3803vw, 6.25rem); /* 64 → 100: zvislý padding sekcie */
  --gap-lg:    clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);    /* 40 → 80: medzi stĺpcami textu a vizuálu */
  --gap-md:    clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem);  /* 24 → 40: hlavička sekcie, bloky */
  --gap-grid:  var(--space-5);                                /* 20: medzi kartami */
  --pad-card:  clamp(1.5rem, 1.2800rem + 0.9390vw, 2.125rem); /* 24 → 34: vnútro karty */
  --pad-panel: clamp(1.5rem, 0.8838rem + 2.6291vw, 3.25rem);  /* 24 → 52: vnútro väčšieho boxu */

  /* ------------------------------------------------------------- Rozloženie */

  --container-max:    90rem;   /* 1440 */
  --container-gutter: clamp(1.25rem, 0.5018rem + 3.1925vw, 3.375rem); /* 20 → 54 */
  --container-narrow: 47.5rem; /* 760: text článku */
  --header-h:         5rem;    /* 80 */
  --stats-h:          6.5rem;  /* 104: pás s údajmi pod hero, ktorý má byť vidieť */
  --logo-h:           1.625rem; /* 26: logo bez claimu (mobil) */
  --logo-claim-h:     2.875rem; /* 46: logo s claimom (od 600 px, pätička) */

  /* Breakpointy (CSS premenné v @media nefungujú, používať tieto čísla):
       sm  600px   veľký mobil
       md  900px   tablet, lámanie viacstĺpcových mriežok na 1 stĺpec
       lg 1200px   malý desktop
       xl 1440px   plná šírka makiet
     Pravidlo: mobile first, @media (min-width: …). */

  /* ------------------------------------------------------------ Ostatné */

  --radius-0:  0;
  --radius-sm: 4px;    /* štítky, polia formulára */
  --radius:    8px;    /* jemné zaoblenie boxov: karty, panely, obrázky */
  --radius-btn: 6px;   /* tlačidlá */
  --radius-pill: 999px;

  --border:        1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --border-dark:   1px solid var(--color-dark-line);

  --shadow-media: 0 30px 60px rgb(46 62 69 / .35); /* iba ilustrácie a produktové fotky */

  /* Zástupné plochy pre fotky (kým nie sú reálne obrázky) */
  --media-light: linear-gradient(145deg, #dbe3e6, #aebbc0);
  --media-dark:  linear-gradient(145deg, #0b3a47, var(--color-black));
  --media-grid:  linear-gradient(var(--color-line) 1px, transparent 1px) 0 0 / 48px 48px,
                 linear-gradient(90deg, var(--color-line) 1px, transparent 1px) 0 0 / 48px 48px;

  /* Ilustrácie z makiet (illustrations.css): kovové telo stroja, tiene, pásy */
  --illo-metal:       #e8ecee;
  --illo-metal-light: #f9fbfb;
  --illo-metal-dark:  #c2c9cc;
  --illo-band:        #cfd7da;
  --illo-bottle:      linear-gradient(90deg, #9eb9c2, #edf6f8, #9eb9c2);
  --illo-bottle-neck: #b7c8ce;
  --illo-screen:      var(--color-navy);
  --illo-shadow:      0 32px 60px rgb(142 158 164 / .75);
  --illo-media-soft:  linear-gradient(145deg, #e7ecee, #cdd6da);
  --illo-media-paper: linear-gradient(145deg, #dbe3e6, #ffffff);

  --btn-pad-y:   1rem;      /* 16 */
  --btn-pad-x:   1.375rem;  /* 22 */
  --btn-min-h:   3rem;      /* 48: dotykový cieľ */

  --duration:   .2s;
  --ease:       cubic-bezier(.2, .7, .2, 1);

  --z-header: 20;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0s; }
}