/* =========================================================
   Express Group – spoločné premenné (farby, písmo, veľkosti, medzery, animácie)
   Používa ich web.css aj kalkulačka. Veľkosti sa plynulo menia medzi 360 px a 1280 px.
   ========================================================= */
:root {
  /* Farby */
  --red: #e30613;
  --red-hover: #c40511;
  --red-soft: #fdeced;
  --red-glow: rgba(227, 6, 19, 0.28);
  --red-text: #c40511; /* červený text – kontrast 4.5:1 aj na ružovom pozadí */
  --ink: #15181d;
  --ink-soft: #3d444f;
  --muted: #5f6672;
  --line: #e4e7ec;
  --line-strong: #cfd4db;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-alt: #f6f7f9;
  --dark: #171a1f;
  --dark-text: #c7ccd4;
  --focus-ring: #15181d; /* na tmavom pozadí sa prepína na bielu */

  /* Ikony (SVG) */
  --icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.61 7.99A9.5 9.5 0 1 1 16.01 3.39' fill='none' stroke='%23e30613' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6 11.8c.8-.6 1.9-.5 2.6.2l2 2.3c2.9-4.5 6.8-9.1 12.2-12.7-4.6 4.4-8.2 9.7-10.9 15.6-.5 1-1.9 1.1-2.5.2l-3.5-4.1c-.4-.5-.3-1.1.1-1.5z' fill='%23e30613'/%3E%3C/svg%3E");
  /* „verified“ odznak – tvar podľa Lucide badge-check (ISC), vyplnený */
  --icon-check-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' fill='%23e30613' stroke='%23e30613' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='m8.8 12.2 2.2 2.2 4.2-4.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* krúžok s fajkou (obrys) – vybraná možnosť vo vlastnom selecte */
  --icon-check-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c40511' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8.3 12.3 2.5 2.5 5-5.3'/%3E%3C/svg%3E");
  /* šípka nadol pre selecty */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6672' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* Písmo */
  --font-heading: "Archivo", "Arial Black", Arial, sans-serif;
  --font-body: "DM Sans", Arial, Helvetica, sans-serif;
  --heading-stretch: 112%;

  /* Veľkosti písma (mobil → desktop) */
  --fs-xs: clamp(12px, 11.6px + 0.11vw, 13px); /* 12 → 13 */
  --fs-sm: clamp(14px, 13.6px + 0.11vw, 15px); /* 14 → 15 */
  --fs-base: clamp(16px, 15.6px + 0.11vw, 17px); /* 16 → 17 */
  --fs-md: clamp(17px, 16.2px + 0.22vw, 19px); /* 17 → 19 */
  --fs-lg: clamp(19px, 17.8px + 0.33vw, 22px); /* 19 → 22 */
  --fs-xl: clamp(23px, 21px + 0.54vw, 28px); /* 23 → 28 */
  --fs-2xl: clamp(28px, 24.9px + 0.87vw, 36px); /* 28 → 36 */
  --fs-3xl: clamp(34px, 27px + 1.96vw, 52px); /* 34 → 52 */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* Medzery */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: clamp(16px, 15.2px + 0.22vw, 18px); /* 16 → 18 */
  --space-lg: clamp(24px, 20.9px + 0.87vw, 32px); /* 24 → 32 */
  --space-xl: clamp(32px, 26.3px + 1.74vw, 48px); /* 32 → 48 */
  --space-2xl: clamp(48px, 38.6px + 2.61vw, 72px); /* 48 → 72 */
  --section-y: clamp(64px, 45.2px + 5.22vw, 112px); /* 64 → 112 */
  --grid-gap: clamp(16px, 12.9px + 0.87vw, 24px); /* 16 → 24 */

  /* Zaoblenia a tiene */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05),
    0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.06),
    0 12px 24px -4px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 20px -6px rgba(16, 24, 40, 0.08),
    0 28px 48px -12px rgba(16, 24, 40, 0.16);

  /* Animácie */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 700ms;

  interpolate-size: allow-keywords;
}