/* KUBO Rancher, tokeny stránky Pripravujeme. Verzia 2 (Nina 27. 10. 2026,
   Marcelove pripomienky k v1: väčší h1, motív plota na každej šírke, jednotné
   štítky, bez päty). Kontrast je vypočítaný podľa WCAG zo šestnástkových hodnôt. */

:root {
  /* farby: celý úvod je tmavá plocha, svetlá ostáva pre budúci plný web */
  --c-dark: #2b2118;         /* pozadie stránky */
  --c-on-dark: #f7f3ee;      /* text na --c-dark 14,26:1 */
  --c-on-dark-mute: #cfc4b6; /* štítky a doplnkový text na --c-dark 9,17:1 */
  --c-line-dark: #4a3c2f;    /* čiara na tmavej */
  --c-paper: #f4f0e8;        /* svetlá plocha plného webu */
  --c-ink: #1f1a15;          /* text na --c-paper 15,18:1 */

  /* akcent: žltá ušnej známky, hlavná výzva a druhý riadok h1 */
  --c-tag: #f2b705;          /* na --c-dark 8,66:1, text --c-dark na nej 8,66:1 */
  --c-tag-hover: #ffc933;    /* --c-dark na nej 10,24:1 */
  --c-tag-active: #d9a300;   /* --c-dark na nej 6,89:1 */

  /* motív: plot fixácie, ozdoba bez textu (aria-hidden), kontrast netreba */
  --c-motiv: #6b5845;        /* stĺpiky a ráhno na --c-dark, 2,33:1, plot ustúpi za text */
  --c-motiv-brana: var(--c-tag); /* hlavová zábrana, jediná žltá časť plota */

  /* focus: obrys 3 px */
  --c-focus: var(--c-on-dark);    /* na --c-dark 14,26:1 */
  --c-focus-on-tag: var(--c-dark); /* na --c-tag 8,66:1 */

  /* stavy, text na --c-dark (stránka formulár nemá) */
  --c-error: #ff8a7a;        /* 6,88:1 */
  --c-success: #8fd19e;      /* 8,84:1 */

  /* typografia: Archivo (OFL), jedna rodina, šírka 62 až 125 % */
  --font: "Archivo", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --stretch-display: 75%;    /* h1, číslo, značka */
  --stretch-text: 100%;
  /* h1 úvodu: 16 vw na mobile (62 px pri 390), 8,4 vw od 1024 (121 px pri 1440) */
  --fs-hero: clamp(48px, 16vw, 96px);
  --fs-hero-wide: clamp(86px, min(8.4vw, 13.5svh), 176px); /* nízke široké okno: h1 sa zmestí nad plot */
  --fs-14: 0.875rem;         /* štítok */
  --fs-16: 1rem;             /* text */
  --fs-20: 1.25rem;
  --fs-25: 1.5625rem;        /* e-mail */
  --fs-31: 1.9375rem;        /* číslo telefónu do 1024 */
  --fs-39: 2.4375rem;
  --fs-49: 3.0625rem;        /* číslo telefónu od 1024 */
  --lh-text: 1.5;
  --lh-hero: 0.96;           /* verzálky s diakritikou, akút nad É sa nedotkne riadku nad ním */
  --lh-head: 1.2;
  --fw-text: 400;
  --fw-strong: 600;
  --fw-display: 800;
  --tracking-label: 0.1em;   /* verzálky štítku do 3 slov */
  --tracking-hero: -0.01em;

  /* priestor, násobky 4 px */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --gutter: 16px;            /* 24 px od 640, 32 px od 1024 */
  --radius: 8px;
  --border-strong: 2px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --target: 44px;

  /* plot: výška od spodku okna, stĺpik, rozostup, ráhno */
  --plot-h: clamp(140px, 24svh, 240px); /* od 1024: clamp(220px, 30svh, 360px) */
  --plot-stlpik: 12px;       /* 16 px od 1024 */
  --plot-krok: 36px;         /* 48 px od 1024 */
  --plot-rahno: 10px;        /* 14 px od 1024 */
  --brana-w: calc(2 * var(--plot-krok) - var(--plot-stlpik)); /* 60 px, od 1024 80 px: zábrana vyplní otvor medzi dvoma stĺpikmi */

  /* pohyb, vypnutý pri prefers-reduced-motion */
  --t-fast: 150ms ease;
}

@media (min-width: 640px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) {
  :root { --gutter: 32px; --plot-h: clamp(220px, 30svh, 360px); --plot-stlpik: 16px; --plot-krok: 48px; --plot-rahno: 14px; }
}