/* ==========================================================================
   Chata Trubárka – design tokeny
   Jediný zdroj farieb, písma, medzier, zaoblení a tieňov.
   Komponenty (templates/assets/site.css) používajú výhradne tieto premenné.
   ========================================================================== */

:root {
  /* --- Farby: značka --- */
  --c-teal-900: #0f2f31;   /* hover tmavého tlačidla */
  --c-teal-700: #1b474a;   /* primárna značková farba: tlačidlá, nadpisy, tmavé pásy */
  --c-teal-100: #e6efeb;   /* svetlé pozadie ikon */
  --c-orange-500: #e66001; /* značková oranžová – len dekor a text ≥ 24 px (kontrast 3,1:1) */
  --c-orange-700: #c2410c; /* akčná oranžová – tlačidlá a menší text (kontrast 5,2:1 s bielou) */
  --c-orange-800: #9a3412; /* hover akčnej oranžovej */

  /* --- Farby: neutrálne --- */
  --c-bg: #f6f3ee;         /* pozadie stránky (teplá béžová) */
  --c-surface: #ffffff;    /* karty, formuláre */
  --c-surface-alt: #f3f2f0;/* rámčeky so zoznamom */
  --c-border: #e3ddd3;     /* jemné linky */
  --c-text: #1f2a2b;       /* hlavný text (14,6:1) */
  --c-text-2: #3a4647;     /* odsek (8,8:1) */
  --c-text-muted: #5d6869; /* popisky (5,2:1 na --c-bg) */
  --c-on-dark: #ffffff;
  --c-on-dark-2: #d7e6e3;  /* sekundárny text na --c-teal-700 (8:1) */
  --c-border-strong: #8f887c; /* okraj formulárových polí (3,4:1, WCAG 1.4.11) */
  --c-script-on-dark: #ffe2c8; /* písaný podnadpis na fotke */
  --c-on-dark-overlay: rgba(255, 255, 255, 0.14);
  --c-on-dark-line: rgba(255, 255, 255, 0.3);
  --c-focus: #2563eb;      /* obrys pri ovládaní klávesnicou */
  --c-star: #c2410c;

  /* --- Písmo --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* nadpisy */
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;     /* text */
  --font-script: "Caveat Brush", "Segoe Script", cursive;          /* oranžový písaný podnadpis */

  --fs-h1: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);      /* 36 → 64 px */
  --fs-h1-sub: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);  /* H1 v hlavičke podstránky */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);   /* 28 → 44 px */
  --fs-h3: 1.375rem;                                  /* 22 px */
  --fs-h4: 1.0625rem;                                 /* 17 px, nadpisy kariet */
  --fs-lead: 1.1875rem;                               /* 19 px */
  --fs-body: 1.0625rem;                               /* 17 px */
  --fs-small: 0.9375rem;                              /* 15 px */
  --fs-xs: 0.8125rem;                                 /* 13 px */
  --fs-script: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* --- Medzery (8px mriežka) --- */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 */
  --section-gap: clamp(3.5rem, 2rem + 5vw, 6rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 4rem);          /* okraj stránky 16 → 64 px */
  --container: 1312px;                                /* 1440 − 2 × 64 */

  /* --- Zaoblenia --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* --- Tiene --- */
  --shadow-sm: 0 1px 2px rgba(31, 42, 43, 0.06);
  --shadow-md: 0 6px 20px rgba(31, 42, 43, 0.08);
  --shadow-lg: 0 16px 40px rgba(31, 42, 43, 0.14);

  /* --- Ostatné --- */
  --header-h: 84px;
  --header-h-mobile: 64px;
  --overlay-hero: linear-gradient(0deg, rgba(12, 32, 30, 0.72) 0%, rgba(12, 32, 30, 0.3) 45%, rgba(12, 32, 30, 0) 70%);
  --overlay-page: linear-gradient(0deg, rgba(12, 32, 30, 0.82) 0%, rgba(12, 32, 30, 0.6) 55%, rgba(12, 32, 30, 0.4) 100%);
  --overlay-lightbox: rgba(10, 20, 20, 0.92);
  --t-fast: 150ms ease;
}