/* ==========================================================================
   tokens.css — designové tokeny webu vendydesign.com
   Zdroj pravdy: Figma „Vendy-web“, lokální styly (barvy + text styly).
   Hodnoty neměň odhadem — při změně ve Figmě je přepiš sem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpointy (CSS proměnné v @media nefungují, proto jen jako reference):
   mobil   ≤ 767 px   (design 390 px)
   tablet  768–1199 px
   desktop ≥ 1200 px  (design 1496 px)
   -------------------------------------------------------------------------- */

:root {
  /* ---- Barvy: red ---------------------------------------------------- */
  --red-50: #FDE7EA;
  --red-100: #F8B5BE;
  --red-200: #F5919F;
  --red-300: #F05E73;
  --red-400: #ED3F58;
  --red-500: #E90F2E; /* primární */
  --red-600: #D40E2A;
  --red-700: #A50B21;
  --red-800: #800819;
  --red-900: #620613;

  /* ---- Barvy: grey --------------------------------------------------- */
  --grey-50: #E8E8E8;  /* linky, text na tmavém */
  --grey-100: #B7B7B7;
  --grey-200: #959595;
  --grey-300: #646464; /* sekundární text */
  --grey-400: #464646;
  --grey-500: #181818; /* text, tmavé prvky */
  --grey-600: #161616;
  --grey-700: #111111;
  --grey-800: #0D0D0D;
  --grey-900: #0A0A0A;

  /* ---- Barvy: white -------------------------------------------------- */
  --white-50: #FFFFFD;
  --white-100: #FFFFFA;
  --white-200: #FFFFF7;
  --white-300: #FFFFF4;
  --white-400: #FFFFF1;
  --white-500: #FFFFEE;
  --white-600: #E8E8D9;
  --white-700: #B5B5A9;
  --white-800: #8C8C83;
  --white-900: #6B6B64;

  /* ---- Barvy: samostatné styly --------------------------------------- */
  --white: #FFFFFF;      /* Figma „White“ */
  --background: #F8F6F0; /* Figma „Backround“ */

  /* ---- Sémantické aliasy (používej v komponentách) ------------------- */
  --color-bg: var(--white);          /* pozadí stránek je ve Figmě bílé */
  --color-surface-soft: var(--background); /* karty a bloky (Figma „Backround“) */
  --color-surface: var(--white);
  --color-text: var(--grey-500);
  --color-text-muted: var(--grey-300);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: var(--grey-50);
  --color-primary: var(--red-500);
  --color-primary-hover: var(--red-600);
  --color-dark: var(--grey-500);
  --color-dark-hover: var(--grey-400);
  --color-line: var(--grey-50);
  --color-line-accent: var(--red-100);
  --color-focus: var(--grey-500);
  --color-focus-inverse: var(--grey-50);

  /* ---- Rozměry a layout ---------------------------------------------- */
  --container: 1128px;     /* obsahový kontejner */
  --container-nav: 1280px; /* šířka řádku navigace (Figma) */
  --page-max: 1496px;      /* designová šířka desktopu */
  --gutter: 24px;          /* boční okraj hlavičky na mobilu */
  --section-gutter: 20px;  /* boční okraj sekcí na mobilu (Figma) */
  --radius-card: 24px;
  --radius-pill: 80px;

  /* ---- Pohyb ---------------------------------------------------------
     Jedna sada pro celý web: animuje se jen transform, opacity a barva.
     Při prefers-reduced-motion se vše vypne (base.css). */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* plynulý „ease-out“ */
  --duration: 250ms;        /* hover, barvy, drobné posuny */
  --duration-base: 400ms;   /* menu, karusel, FAQ, rozbalení karet */
  --duration-slow: 600ms;   /* objevení při scrollu, hero, počítadla */
  --duration-menu: var(--duration-base);
  --stagger: 80ms;          /* zpoždění mezi kartami v řadě */
  --reveal-shift: 20px;     /* posun při objevení */

  /* ---- Písmo --------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- Typografie ----------------------------------------------------
     Každý Figma text styl = 3 proměnné (velikost, řádkování, prostrkání).
     Styly s mobilním protějškem plynule škálují přes clamp()
     mezi šířkou viewportu 390 px (mobil) a 1496 px (desktop).
     -------------------------------------------------------------------- */
  /* Display/Číslo XL → Mobile/Číslo L */
  --display-cislo-xl-size: clamp(3rem, 2.4711rem + 2.17vw, 4.5rem);
  --display-cislo-xl-lh: clamp(3.25rem, 2.4919rem + 3.1103vw, 5.4rem);
  --display-cislo-xl-ls: clamp(-4.32px, -1.0737px - 0.217vw, -1.92px);
  /* Display/Číslo L → Mobile/Číslo L */
  --display-cislo-l-size: clamp(3rem, 2.6474rem + 1.4467vw, 4rem);
  --display-cislo-l-lh: clamp(3rem, 3.3382rem - 0.3617vw, 3.25rem);
  --display-cislo-l-ls: clamp(-2.4px, -1.7507px - 0.0434vw, -1.92px);
  /* Display/Číslo M → Mobile/Číslo M */
  --display-cislo-m-size: clamp(2.25rem, 1.9855rem + 1.085vw, 3rem);
  --display-cislo-m-lh: clamp(2.625rem, 2.3235rem + 1.2369vw, 3.48rem);
  --display-cislo-m-ls: clamp(-1.68px, -0.8684px - 0.0542vw, -1.08px);
  /* Display/Číslo S → Mobile/Číslo M */
  --display-cislo-s-size: clamp(2.25rem, 2.1618rem + 0.3617vw, 2.5rem);
  --display-cislo-s-lh: clamp(2.625rem, 2.4928rem + 0.5425vw, 3rem);
  --display-cislo-s-ls: clamp(-2.4px, -0.6145px - 0.1193vw, -1.08px);
  /* Heading/H1 → Mobile/H2 */
  --heading-h1-size: clamp(2rem, 1.3829rem + 2.5316vw, 3.75rem);
  --heading-h1-lh: clamp(2.375rem, 1.6257rem + 3.0741vw, 4.5rem);
  --heading-h1-ls: clamp(-2.1px, -0.7744px - 0.0886vw, -1.12px);
  /* Heading/H1 v hero → Mobile/H1 */
  --heading-h1-hero-size: clamp(2.25rem, 1.7211rem + 2.17vw, 3.75rem);
  --heading-h1-hero-lh: clamp(2.625rem, 1.9638rem + 2.7125vw, 4.5rem);
  --heading-h1-hero-ls: clamp(-2.1px, -0.9638px - 0.0759vw, -1.26px);
  /* Heading/H2 → Mobile/H2 */
  --heading-h2-size: clamp(2rem, 1.427rem + 2.3508vw, 3.625rem);
  --heading-h2-lh: clamp(2.375rem, 1.802rem + 2.3508vw, 4rem);
  --heading-h2-ls: clamp(-2.03px, -0.7991px - 0.0823vw, -1.12px);
  /* Heading/H3 → Mobile/H2 */
  --heading-h3-size: clamp(2rem, 1.6474rem + 1.4467vw, 3rem);
  --heading-h3-lh: clamp(2.375rem, 1.9342rem + 1.8083vw, 3.625rem);
  --heading-h3-ls: clamp(-1.68px, -0.9225px - 0.0506vw, -1.12px);
  /* Heading/H3 CTA → Mobile/H2 */
  --heading-h3-cta-size: clamp(2rem, 1.6474rem + 1.4467vw, 3rem);
  --heading-h3-cta-lh: clamp(2.375rem, 2.1105rem + 1.085vw, 3.125rem);
  --heading-h3-cta-ls: clamp(-1.68px, -0.9225px - 0.0506vw, -1.12px);
  /* Heading/H4 → Mobile/H3 */
  --heading-h4-size: clamp(1.5rem, 1.2355rem + 1.085vw, 2.25rem);
  --heading-h4-lh: clamp(1.875rem, 1.6634rem + 0.868vw, 2.475rem);
  --heading-h4-ls: clamp(-0.48px, -0.6493px + 0.0434vw, 0px);
  /* Heading/H5 → Mobile/H3 */
  --heading-h5-size: clamp(1.5rem, 1.3237rem + 0.7233vw, 2rem);
  --heading-h5-lh: clamp(1.875rem, 1.6634rem + 0.868vw, 2.475rem);
  --heading-h5-ls: clamp(-0.48px, -0.6493px + 0.0434vw, 0px);
  /* Title/L → Mobile/Title */
  --title-l-size: clamp(1.125rem, 0.9928rem + 0.5425vw, 1.5rem);
  --title-l-lh: clamp(1.375rem, 1.0665rem + 1.2658vw, 2.25rem);
  --title-l-ls: clamp(-0.84px, 0.0527px - 0.0597vw, -0.18px);
  /* Title/M → Mobile/Title */
  --title-m-size: clamp(1.125rem, 0.9928rem + 0.5425vw, 1.5rem);
  --title-m-lh: clamp(1.375rem, 1.1564rem + 0.8969vw, 1.995rem);
  --title-m-ls: clamp(-0.48px, -0.0742px - 0.0271vw, -0.18px);
  /* Title/S → Mobile/Title */
  --title-s-size: clamp(1.125rem, 0.9928rem + 0.5425vw, 1.5rem);
  --title-s-lh: clamp(1.375rem, 1.2428rem + 0.5425vw, 1.75rem);
  --title-s-ls: clamp(-0.48px, -0.0742px - 0.0271vw, -0.18px);
  /* Title/XS → Mobile/Title */
  --title-xs-size: clamp(1.125rem, 1.0368rem + 0.3617vw, 1.375rem);
  --title-xs-lh: clamp(1.375rem, 1.278rem + 0.3978vw, 1.65rem);
  --title-xs-ls: clamp(-0.18px, -0.2435px + 0.0163vw, 0px);
  /* Body/XL → Body/M */
  --body-xl-size: clamp(1rem, 0.9118rem + 0.3617vw, 1.25rem);
  --body-xl-lh: clamp(1.5rem, 1.4559rem + 0.1808vw, 1.625rem);
  --body-xl-ls: 0px;
  /* Body/XL Medium → Body/M Medium */
  --body-xl-medium-size: clamp(1rem, 0.9118rem + 0.3617vw, 1.25rem);
  --body-xl-medium-lh: clamp(1.5rem, 1.4118rem + 0.3617vw, 1.75rem);
  --body-xl-medium-ls: clamp(-0.6px, 0.2116px - 0.0542vw, 0px);
  /* Body/L → Body/M */
  --body-l-size: clamp(1rem, 0.9559rem + 0.1808vw, 1.125rem);
  --body-l-lh: 1.5rem;
  --body-l-ls: 0px;
  /* Body/Footer claim (pevná velikost) */
  --body-footer-claim-size: 1.0625rem;
  --body-footer-claim-lh: 1.4375rem;
  --body-footer-claim-ls: -0.32px;
  /* Body/M (pevná velikost) */
  --body-m-size: 1rem;
  --body-m-lh: 1.5rem;
  --body-m-ls: 0px;
  /* Body/M Medium (pevná velikost) */
  --body-m-medium-size: 1rem;
  --body-m-medium-lh: 1.5rem;
  --body-m-medium-ls: 0px;
  /* Body/M Tight (pevná velikost) */
  --body-m-tight-size: 1rem;
  --body-m-tight-lh: 1.4rem;
  --body-m-tight-ls: -0.32px;
  /* Body/M Tight Medium (pevná velikost) */
  --body-m-tight-medium-size: 1rem;
  --body-m-tight-medium-lh: 1.4rem;
  --body-m-tight-medium-ls: 0px;
  /* Body/M Tight Bold (pevná velikost) */
  --body-m-tight-bold-size: 1rem;
  --body-m-tight-bold-lh: 1.4rem;
  --body-m-tight-bold-ls: -0.32px;
  /* Body/M Compact (pevná velikost) */
  --body-m-compact-size: 1rem;
  --body-m-compact-lh: 1.3rem;
  --body-m-compact-ls: -0.07px;
  /* Body/S (pevná velikost) */
  --body-s-size: 0.875rem;
  --body-s-lh: 1.25rem;
  --body-s-ls: 0px;
  /* Body/S Legal (pevná velikost) */
  --body-s-legal-size: 0.875rem;
  --body-s-legal-lh: 1.3125rem;
  --body-s-legal-ls: -0.28px;
  /* UI/Button (pevná velikost) */
  --ui-button-size: 1rem;
  --ui-button-lh: 1.5rem;
  --ui-button-ls: 0px;
  /* UI/Nav (pevná velikost) */
  --ui-nav-size: 1rem;
  --ui-nav-lh: 1.4rem;
  --ui-nav-ls: 1.1px;
  /* UI/Caption (pevná velikost) */
  --ui-caption-size: 0.75rem;
  --ui-caption-lh: normal;
  --ui-caption-ls: 0px;
  /* Mobile/H1 (jen mobil, pevná velikost) */
  --mobile-h1-size: 2.25rem;
  --mobile-h1-lh: 2.625rem;
  --mobile-h1-ls: -1.26px;
  /* Mobile/Menu (jen mobil, pevná velikost) */
  --mobile-menu-size: 2rem;
  --mobile-menu-lh: 2.5rem;
  --mobile-menu-ls: -1.12px;
  /* Mobile/H2 (jen mobil, pevná velikost) */
  --mobile-h2-size: 2rem;
  --mobile-h2-lh: 2.375rem;
  --mobile-h2-ls: -1.12px;
  /* Mobile/H3 (jen mobil, pevná velikost) */
  --mobile-h3-size: 1.5rem;
  --mobile-h3-lh: 1.875rem;
  --mobile-h3-ls: -0.48px;
  /* Mobile/Title (jen mobil, pevná velikost) */
  --mobile-title-size: 1.125rem;
  --mobile-title-lh: 1.375rem;
  --mobile-title-ls: -0.18px;
  /* Mobile/Číslo L (jen mobil, pevná velikost) */
  --mobile-cislo-l-size: 3rem;
  --mobile-cislo-l-lh: 3.25rem;
  --mobile-cislo-l-ls: -1.92px;
  /* Mobile/Číslo M (jen mobil, pevná velikost) */
  --mobile-cislo-m-size: 2.25rem;
  --mobile-cislo-m-lh: 2.625rem;
  --mobile-cislo-m-ls: -1.08px;
}

/* Tablet: širší boční okraj */
@media (min-width: 768px) {
  :root { --gutter: 40px; --section-gutter: 40px; }
}

/* ==========================================================================
   Typografické třídy — 1 třída = 1 text styl z Figmy.
   Název: .t-<skupina>-<styl>, např. Heading/H1 → .t-heading-h1
   Font-family se dědí z <body>.
   ========================================================================== */

/* Display/Číslo XL → Mobile/Číslo L */
.t-display-cislo-xl {
  font-size: var(--display-cislo-xl-size);
  font-weight: 500;
  line-height: var(--display-cislo-xl-lh);
  letter-spacing: var(--display-cislo-xl-ls);
}

/* Display/Číslo L → Mobile/Číslo L */
.t-display-cislo-l {
  font-size: var(--display-cislo-l-size);
  font-weight: 500;
  line-height: var(--display-cislo-l-lh);
  letter-spacing: var(--display-cislo-l-ls);
}

/* Display/Číslo M → Mobile/Číslo M */
.t-display-cislo-m {
  font-size: var(--display-cislo-m-size);
  font-weight: 500;
  line-height: var(--display-cislo-m-lh);
  letter-spacing: var(--display-cislo-m-ls);
}

/* Display/Číslo S → Mobile/Číslo M */
.t-display-cislo-s {
  font-size: var(--display-cislo-s-size);
  font-weight: 500;
  line-height: var(--display-cislo-s-lh);
  letter-spacing: var(--display-cislo-s-ls);
}

/* Heading/H1 → Mobile/H2 */
.t-heading-h1 {
  font-size: var(--heading-h1-size);
  font-weight: 500;
  line-height: var(--heading-h1-lh);
  letter-spacing: var(--heading-h1-ls);
}

/* Heading/H1 v hero (HP a podstránky) → Mobile/H1 */
.t-heading-h1-hero {
  font-size: var(--heading-h1-hero-size);
  font-weight: 500;
  line-height: var(--heading-h1-hero-lh);
  letter-spacing: var(--heading-h1-hero-ls);
}

/* Heading/H2 → Mobile/H2 */
.t-heading-h2 {
  font-size: var(--heading-h2-size);
  font-weight: 500;
  line-height: var(--heading-h2-lh);
  letter-spacing: var(--heading-h2-ls);
}

/* Heading/H3 → Mobile/H2 */
.t-heading-h3 {
  font-size: var(--heading-h3-size);
  font-weight: 500;
  line-height: var(--heading-h3-lh);
  letter-spacing: var(--heading-h3-ls);
}

/* Heading/H3 CTA → Mobile/H2 */
.t-heading-h3-cta {
  font-size: var(--heading-h3-cta-size);
  font-weight: 400;
  line-height: var(--heading-h3-cta-lh);
  letter-spacing: var(--heading-h3-cta-ls);
}
/* Na mobilu přebírá řez ze stylu Mobile/H2. */
@media (max-width: 767px) { .t-heading-h3-cta { font-weight: 500; } }

/* Heading/H4 → Mobile/H3 */
.t-heading-h4 {
  font-size: var(--heading-h4-size);
  font-weight: 500;
  line-height: var(--heading-h4-lh);
  letter-spacing: var(--heading-h4-ls);
}

/* Heading/H5 → Mobile/H3 */
.t-heading-h5 {
  font-size: var(--heading-h5-size);
  font-weight: 500;
  line-height: var(--heading-h5-lh);
  letter-spacing: var(--heading-h5-ls);
}

/* Title/L → Mobile/Title */
.t-title-l {
  font-size: var(--title-l-size);
  font-weight: 400;
  line-height: var(--title-l-lh);
  letter-spacing: var(--title-l-ls);
}

/* Title/M → Mobile/Title */
.t-title-m {
  font-size: var(--title-m-size);
  font-weight: 400;
  line-height: var(--title-m-lh);
  letter-spacing: var(--title-m-ls);
}

/* Title/S → Mobile/Title */
.t-title-s {
  font-size: var(--title-s-size);
  font-weight: 400;
  line-height: var(--title-s-lh);
  letter-spacing: var(--title-s-ls);
}

/* Title/XS → Mobile/Title */
.t-title-xs {
  font-size: var(--title-xs-size);
  font-weight: 400;
  line-height: var(--title-xs-lh);
  letter-spacing: var(--title-xs-ls);
}

/* Body/XL → Body/M */
.t-body-xl {
  font-size: var(--body-xl-size);
  font-weight: 400;
  line-height: var(--body-xl-lh);
  letter-spacing: var(--body-xl-ls);
}

/* Body/XL Medium → Body/M Medium */
.t-body-xl-medium {
  font-size: var(--body-xl-medium-size);
  font-weight: 500;
  line-height: var(--body-xl-medium-lh);
  letter-spacing: var(--body-xl-medium-ls);
}

/* Body/L → Body/M */
.t-body-l {
  font-size: var(--body-l-size);
  font-weight: 400;
  line-height: var(--body-l-lh);
  letter-spacing: var(--body-l-ls);
}

/* Body/Footer claim (pevná velikost) */
.t-body-footer-claim {
  font-size: var(--body-footer-claim-size);
  font-weight: 400;
  line-height: var(--body-footer-claim-lh);
  letter-spacing: var(--body-footer-claim-ls);
}

/* Body/M (pevná velikost) */
.t-body-m {
  font-size: var(--body-m-size);
  font-weight: 400;
  line-height: var(--body-m-lh);
  letter-spacing: var(--body-m-ls);
}

/* Body/M Medium (pevná velikost) */
.t-body-m-medium {
  font-size: var(--body-m-medium-size);
  font-weight: 500;
  line-height: var(--body-m-medium-lh);
  letter-spacing: var(--body-m-medium-ls);
}

/* Body/M Tight (pevná velikost) */
.t-body-m-tight {
  font-size: var(--body-m-tight-size);
  font-weight: 400;
  line-height: var(--body-m-tight-lh);
  letter-spacing: var(--body-m-tight-ls);
}

/* Body/M Tight Medium (pevná velikost) */
.t-body-m-tight-medium {
  font-size: var(--body-m-tight-medium-size);
  font-weight: 500;
  line-height: var(--body-m-tight-medium-lh);
  letter-spacing: var(--body-m-tight-medium-ls);
}

/* Body/M Tight Bold (pevná velikost) */
.t-body-m-tight-bold {
  font-size: var(--body-m-tight-bold-size);
  font-weight: 700;
  line-height: var(--body-m-tight-bold-lh);
  letter-spacing: var(--body-m-tight-bold-ls);
}

/* Body/M Compact (pevná velikost) */
.t-body-m-compact {
  font-size: var(--body-m-compact-size);
  font-weight: 400;
  line-height: var(--body-m-compact-lh);
  letter-spacing: var(--body-m-compact-ls);
}

/* Body/S (pevná velikost) */
.t-body-s {
  font-size: var(--body-s-size);
  font-weight: 400;
  line-height: var(--body-s-lh);
  letter-spacing: var(--body-s-ls);
}

/* Body/S Legal (pevná velikost) */
.t-body-s-legal {
  font-size: var(--body-s-legal-size);
  font-weight: 400;
  line-height: var(--body-s-legal-lh);
  letter-spacing: var(--body-s-legal-ls);
}

/* UI/Button (pevná velikost) */
.t-ui-button {
  font-size: var(--ui-button-size);
  font-weight: 500;
  line-height: var(--ui-button-lh);
  letter-spacing: var(--ui-button-ls);
  text-transform: uppercase;
}

/* UI/Nav (pevná velikost) */
.t-ui-nav {
  font-size: var(--ui-nav-size);
  font-weight: 400;
  line-height: var(--ui-nav-lh);
  letter-spacing: var(--ui-nav-ls);
  text-transform: uppercase;
}

/* UI/Caption (pevná velikost) */
.t-ui-caption {
  font-size: var(--ui-caption-size);
  font-weight: 400;
  line-height: var(--ui-caption-lh);
  letter-spacing: var(--ui-caption-ls);
}

/* Mobile/H1 (pevná velikost) */
.t-mobile-h1 {
  font-size: var(--mobile-h1-size);
  font-weight: 500;
  line-height: var(--mobile-h1-lh);
  letter-spacing: var(--mobile-h1-ls);
}

/* Mobile/Menu (pevná velikost) */
.t-mobile-menu {
  font-size: var(--mobile-menu-size);
  font-weight: 500;
  line-height: var(--mobile-menu-lh);
  letter-spacing: var(--mobile-menu-ls);
}

/* Mobile/H2 (pevná velikost) */
.t-mobile-h2 {
  font-size: var(--mobile-h2-size);
  font-weight: 500;
  line-height: var(--mobile-h2-lh);
  letter-spacing: var(--mobile-h2-ls);
}

/* Mobile/H3 (pevná velikost) */
.t-mobile-h3 {
  font-size: var(--mobile-h3-size);
  font-weight: 500;
  line-height: var(--mobile-h3-lh);
  letter-spacing: var(--mobile-h3-ls);
}

/* Mobile/Title (pevná velikost) */
.t-mobile-title {
  font-size: var(--mobile-title-size);
  font-weight: 400;
  line-height: var(--mobile-title-lh);
  letter-spacing: var(--mobile-title-ls);
}

/* Mobile/Číslo L (pevná velikost) */
.t-mobile-cislo-l {
  font-size: var(--mobile-cislo-l-size);
  font-weight: 500;
  line-height: var(--mobile-cislo-l-lh);
  letter-spacing: var(--mobile-cislo-l-ls);
}

/* Mobile/Číslo M (pevná velikost) */
.t-mobile-cislo-m {
  font-size: var(--mobile-cislo-m-size);
  font-weight: 500;
  line-height: var(--mobile-cislo-m-lh);
  letter-spacing: var(--mobile-cislo-m-ls);
}

/* Body/XL bez mobilního zmenšení — jména v referencích zůstávají 20 px
   i na mobilu (rozhodnutí Venduly, odpovídá rámci 203:400). */
.t-body-xl-static {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.625rem;
  letter-spacing: 0;
}