/* =========================================================================
   TOKENY — Ubytovna Vědomice
   Koncept „Zelená čára": barvy odvozené z fotografií areálu.
   Veškeré barvy a rozměry v projektu pocházejí odsud.
   ========================================================================= */

:root {
  /* ---------- BARVY ---------------------------------------------------
     Zdroj: umělý trávník hřišť, logo Fotbalová farma, omítka budov,
     střešní tašky, obloha nad areálem.
     Kontrasty ověřeny na WCAG AA (text 4.5:1, velký text a UI 3:1).
     -------------------------------------------------------------------- */

  /* Zeleň — logo Fotbalová farma, stěna arény, umělý trávník */
  --c-turf-950: #0A1F13;
  --c-turf-900: #10301E;
  --c-turf-800: #14532D;   /* primární značková zeleň */
  --c-turf-700: #1C6B3C;
  --c-turf-600: #2A8049;
  --c-turf-500: #3E8E4F;   /* jasná tráva */
  --c-turf-300: #8FC79C;
  --c-turf-100: #DCEDE1;
  --c-turf-50:  #EEF6F0;

  /* Písek — omítka budov areálu, podklad stránky */
  --c-sand-500: #C9B48C;
  --c-sand-300: #E3D6BC;
  --c-sand-200: #EFE6D4;
  --c-sand-100: #F7F1E6;
  --c-sand-50:  #FBF8F2;

  /* Terakota — střešní tašky. Výhradně pro akce a CTA. */
  --c-clay-800: #7E2E16;
  --c-clay-700: #9A3A1D;
  --c-clay-600: #B24525;   /* primární CTA */
  --c-clay-500: #C55A38;
  --c-clay-100: #F7E2D9;

  /* Obloha — sekundární akcent (voda, doprava, jednotlivci) */
  --c-sky-800: #1E4E70;
  --c-sky-700: #2E6F9E;
  --c-sky-600: #3F86B8;
  --c-sky-100: #DEEBF4;

  /* Neutrály s teplým nádechem */
  --c-ink:      #101F17;
  --c-ink-soft: #3B4B41;
  --c-ink-mute: #5C6B61;
  --c-line:     #DED3BF;
  --c-line-soft:#EBE2D2;
  --c-white:    #FFFFFF;

  /* Stavové */
  --c-error:   #A3231A;
  --c-error-bg:#FCEBE9;
  --c-ok:      #1C6B3C;
  --c-ok-bg:   #E4F2E8;

  /* ---------- SÉMANTICKÉ ROLE ---------------------------------------- */
  --bg-page:        var(--c-sand-100);
  --bg-surface:     var(--c-white);
  --bg-surface-alt: var(--c-sand-50);
  --bg-sunken:      var(--c-sand-200);
  --bg-invert:      var(--c-turf-900);

  --text-strong:  var(--c-ink);
  --text-body:    var(--c-ink-soft);
  --text-mute:    var(--c-ink-mute);
  --text-invert:  var(--c-sand-100);
  --text-brand:   var(--c-turf-800);

  --border:       var(--c-line);
  --border-soft:  var(--c-line-soft);
  --border-strong:var(--c-turf-800);

  --accent:       var(--c-clay-600);
  --accent-hover: var(--c-clay-700);
  --accent-text:  var(--c-white);

  /* Odlišení cílových skupin — používá se konzistentně napříč webem */
  --grp-skupiny: var(--c-turf-700);
  --grp-jednotlivci: var(--c-sky-700);

  /* ---------- TYPOGRAFIE ---------------------------------------------- */
  --font-sans: "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Plynulá škála, mobile-first, clamp bez media queries */
  --fs-3xs:  0.6875rem;                                  /* 11px  štítky */
  --fs-2xs:  0.75rem;                                    /* 12px */
  --fs-xs:   0.8125rem;                                  /* 13px */
  --fs-sm:   0.875rem;                                   /* 14px */
  --fs-base: 1rem;                                       /* 16px */
  --fs-md:   clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --fs-lg:   clamp(1.1875rem, 0.6vw + 1.05rem, 1.4375rem);
  --fs-xl:   clamp(1.375rem, 1.1vw + 1.15rem, 1.875rem);
  --fs-2xl:  clamp(1.625rem, 2vw + 1.15rem, 2.5rem);
  --fs-3xl:  clamp(2rem, 3.4vw + 1.2rem, 3.5rem);
  --fs-4xl:  clamp(2.375rem, 5.2vw + 1.1rem, 4.75rem);
  --fs-num:  clamp(2.25rem, 4vw + 1.2rem, 4rem);         /* velká čísla */

  --lh-tight:  1.06;
  --lh-snug:   1.22;
  --lh-normal: 1.5;
  --lh-relaxed:1.68;

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

  --ls-tight:  -0.025em;
  --ls-tighter:-0.038em;
  --ls-wide:   0.02em;
  --ls-caps:   0.09em;

  /* ---------- ROZMĚRY A ROZESTUPY ------------------------------------- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;

  /* Vertikální rytmus sekcí — škáluje s viewportem */
  --sp-section: clamp(3.5rem, 7vw, 7rem);
  --sp-section-sm: clamp(2.5rem, 5vw, 4.5rem);

  --w-page:   82.5rem;   /* 1320px — hlavní obsah */
  --w-wide:   96rem;     /* 1536px — široké sekce */
  --w-text:   42rem;     /* 672px — čitelná délka řádku */
  --w-narrow: 34rem;

  --gutter: clamp(1.125rem, 4vw, 3rem);

  /* ---------- TVAR ----------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Bílá lajna hřiště — hlavní grafický motiv */
  --line-w: 3px;
  --line-w-thin: 2px;
  --line-color: var(--c-white);

  --bw: 1px;
  --bw-thick: 2px;

  /* ---------- STÍNY ----------------------------------------------------
     Teple laděné, aby neseděly „studeně" na pískovém podkladu. */
  --sh-xs: 0 1px 2px rgba(16, 31, 23, 0.06);
  --sh-sm: 0 2px 6px rgba(16, 31, 23, 0.07);
  --sh-md: 0 6px 20px rgba(16, 31, 23, 0.09);
  --sh-lg: 0 16px 44px rgba(16, 31, 23, 0.13);
  --sh-xl: 0 28px 70px rgba(16, 31, 23, 0.18);

  /* ---------- POHYB ----------------------------------------------------- */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 380ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- VRSTVENÍ --------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-skip: 500;

  /* ---------- KOMPONENTY ------------------------------------------------- */
  --header-h: 4rem;
  --header-h-lg: 4.75rem;
  --tap: 2.75rem;          /* minimální dotyková plocha 44px */
  --focus-w: 3px;
  --focus-color: var(--c-turf-700);
  --focus-offset: 2px;
}

/* Vetší dotykové plochy a mírně větší základ na malých displejích */
@media (max-width: 26.25rem) {
  :root { --fs-base: 1rem; --gutter: 1.125rem; }
}

/* Uživatel omezil pohyb — vypneme animace globálně */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}