/* =========================================================================
   TOKENY (Design tokens) - jediné miesto pravdy pre farby, veľkosti, spacing.
   -------------------------------------------------------------------------
   Chceš zmeniť vzhľad (inú červenú, iný font, väčšie rozostupy)? Meníš TU,
   na jednom mieste - nie v desiatkach komponentov. V komponentoch nikdy
   nepíš natvrdo #hex / px nadpisu - vždy var(--token).
   ========================================================================= */

:root {
  /* === Farby - značka ============================================ */
  --color-primary:         #e11313;   /* RT červená - buttony, akcenty, linky */
  --color-primary-hover:   #b70e0e;   /* tmavšia pri :hover */
  --color-primary-soft:    #fdeaea;   /* jemné červené pozadie (badge) */
  --color-secondary:       #f5b301;   /* zlatá - hviezdy / hodnotenie */
  --color-secondary-hover: #d99c00;

  /* === Farby - text & povrchy =================================== */
  --color-text:            #4a5058;   /* bežný text */
  --color-text-muted:      #8a9099;   /* stlmený text */
  --color-heading:         #14181f;   /* nadpisy, tmavé prvky */
  --color-bg:              #ffffff;   /* pozadie stránky */
  --color-surface:         #f5f6f8;   /* jemné pozadie sekcií / ikon */
  --color-surface-2:       #eef0f3;   /* o čosi tmavší povrch */
  --color-dark:            #14181f;   /* footer / tmavé bloky */
  --color-border:          #e8eaee;   /* linky, orámovania */
  --color-link:            var(--color-primary);
  --color-link-hover:      var(--color-primary-hover);

  /* === Farby na tmavom pozadí (footer, CTA) + prekryvy ========== */
  --on-dark:               #ffffff;
  --on-dark-strong:        rgba(255, 255, 255, .72);
  --on-dark-muted:         rgba(255, 255, 255, .60);
  --on-dark-faint:         rgba(255, 255, 255, .50);
  --on-dark-line:          rgba(255, 255, 255, .10);
  --on-dark-fill:          rgba(255, 255, 255, .08);
  --color-primary-glow:    rgba(225, 19, 19, .35);
  --header-bg:             rgba(255, 255, 255, .92);

  /* === Stavové farby ============================================ */
  --color-success:         #2f9e44;
  --color-danger:          #e03131;

  /* === Typografia - font-family ================================= */
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Poppins", var(--font-sans);
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --font-base:    var(--font-sans);      /* bežný text */
  --font-heading: var(--font-display);   /* nadpisy h1-h6 */
  --font-ui:      var(--font-sans);      /* buttony, menu, formuláre */

  /* === Typografia - veľkosti ==================================== */
  --fs-base:  1rem;         /* 16px */
  --fs-sm:    0.875rem;     /* 14px */
  --fs-xs:    0.75rem;      /* 12px */
  --fs-lg:    1.125rem;     /* 18px */
  --fs-xl:    1.375rem;     /* 22px */

  --fs-h1:    clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-h2:    clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-h3:    clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-h4:    1.25rem;
  --fs-h5:    1.0625rem;
  --fs-h6:    0.9375rem;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.7;

  /* === Spacing (jedna škála pre margin/padding/gap) ============= */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */

  /* === Rádiusy ================================================== */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* === Tiene =================================================== */
  --shadow-sm: 0 1px 3px rgba(20,24,31,.06);
  --shadow:    0 6px 24px rgba(20,24,31,.08);
  --shadow-lg: 0 18px 50px rgba(20,24,31,.12);
  --overlay:   rgba(20, 24, 31, .92);

  /* === Layout ================================================== */
  --container-max: 1180px;
  --header-h:      82px;
  --gap:           var(--space-5);

  /* === Prechody ================================================ */
  --transition: 0.2s ease;
}

/* =========================================================================
   RESET / ZÁKLAD - nadpisy, text, linky. Riadené tokenmi.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--fw-bold); color: var(--color-heading); }

/* Linky VŽDY s explicitnou farbou. */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-link-hover); }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

ul { margin: 0; padding: 0; list-style: none; }