/**
 * ==========================================================================
 * DESIGN TOKENS — Zelene Ralsko
 * ==========================================================================
 *
 * Zdrojovy dokument: Graficky manual vizualni identity Zelene Ralsko
 * Zadani:            AI_zadani_v3.md
 * Master prompt:     wp-master-prompt-v3.1 [0.4]
 *
 * PRAVIDLA:
 * - Zadne hardcoded hodnoty v komponentach — pouze var(--token)
 * - BEM metodika + prefix .zr- pro Astra kompatibilitu [0.6A]
 * - Mobile-first (zaklad = < 576px)
 *
 * @since 1.0.0
 */

:root {

  /* =======================================================================
     BARVY — BRAND (z grafickeho manualu, strana 7)
     ======================================================================= */

  /* Primarni paleta */
  --color-primary:           #303C1D;  /* Ralska zelena — header, text, tmave sekce */
  --color-primary-dark:      #42501F;  /* Armadni zelena — footer, sekundarni text */
  --color-primary-light:     #96C38B;  /* Energicka zelena — akcent, CTA, hover */
  --color-secondary:         #42501F;  /* Armadni zelena (alias) */
  --color-accent:            #96C38B;  /* Energicka zelena (alias) - dříve  */
  --color-accent-text:  #5B7A52;
    --color-accent-text:  #42501F; 

  --color-bg:                #F6F8E4;  /* Piskovcova bezova — hlavni background */
  --color-bg-alt:            #EDF0D6;  /* Ztmavena bezova — stripovani sekci */

  /* CTA barvy */
  --color-cta-bg:            #96C38B;  /* CTA primary background */
  --color-cta-text:          #303C1D;  /* CTA primary text */
  --color-cta-hover:         #7AAA6F;  /* CTA hover — ztmaveni #96C38B o ~12 % */
  --color-cta-secondary-bg:  transparent;
  --color-cta-secondary-border: #303C1D;
  --color-cta-secondary-text:   #303C1D;
  --color-cta-secondary-hover-bg: rgba(48, 60, 29, 0.08);

  /* Text */
  --color-text:              #303C1D;  /* Heading + body text na svetlem pozadi */
  --color-text-muted:        rgba(66, 80, 31, 0.8);  /* Armadni zelena s opacity */
  --color-text-inverse:      #F6F8E4;  /* Text na tmavem pozadi */
  --color-text-inverse-muted: rgba(246, 248, 228, 0.7);

  /* Highlights */
  --color-highlight:         #96C38B;  /* Zvyrazneni slov v claimech (slovo "prirody") */

  /* Overlay */
  --color-overlay:           rgba(48, 60, 29, 0.55);  /* Hero overlay */
  --color-overlay-heavy:     rgba(48, 60, 29, 0.75);  /* CTA blok, footer */

  /* Borders */
  --color-border:            rgba(48, 60, 29, 0.12);
  --color-border-strong:     rgba(48, 60, 29, 0.25);

  /* Semanticke barvy */
  --color-success:           #28A745;
  --color-warning:           #FFC107;
  --color-error:             #DC3545;
  --color-info:              #17A2B8;

  /* Focus ring */
  --color-focus:             #96C38B;
  --color-focus-ring:        0 0 0 3px rgba(150, 195, 139, 0.5);


  /* =======================================================================
     TYPOGRAFIE (z grafickeho manualu, strana 8)
     ======================================================================= */

  --font-heading:            'Inter', Arial, sans-serif;
  --font-body:               'Inter', Arial, sans-serif;
  --font-mono:               'Courier New', monospace;

  /* Vaha fontu */
  --font-weight-regular:     400;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;

  /* Velikosti — fluid kde to ma smysl, jinak rem */
  --text-xs:                 0.75rem;    /* 12px */
  --text-sm:                 0.875rem;   /* 14px */
  --text-base:               1rem;       /* 16px */
  --text-lg:                 1.125rem;   /* 18px */
  --text-xl:                 1.25rem;    /* 20px */
  --text-2xl:                1.5rem;     /* 24px */
  --text-3xl:                1.875rem;   /* 30px */
  --text-4xl:                2.25rem;    /* 36px */
  --text-5xl:                3rem;       /* 48px */
  --text-6xl:                3.75rem;    /* 60px — H1 hero desktop */

  /* Radkovani */
  --line-height-tight:       1.2;   /* Nadpisy */
  --line-height-base:        1.6;   /* Body text */
  --line-height-loose:       1.8;   /* Vetsi bloky textu */

  /* Prokladani pismen (letter-spacing) */
  --tracking-tight:          -0.02em;  /* H1 */
  --tracking-normal:         0;
  --tracking-wide:           0.05em;   /* Eyebrow, tagy, uppercase */


  /* =======================================================================
     SPACING — 8px grid
     ======================================================================= */

  --space-1:                 0.25rem;   /*  4px */
  --space-2:                 0.5rem;    /*  8px */
  --space-3:                 0.75rem;   /* 12px */
  --space-4:                 1rem;      /* 16px */
  --space-5:                 1.25rem;   /* 20px */
  --space-6:                 1.5rem;    /* 24px */
  --space-8:                 2rem;      /* 32px */
  --space-10:                2.5rem;    /* 40px */
  --space-12:                3rem;      /* 48px */
  --space-16:                4rem;      /* 64px */
  --space-20:                5rem;      /* 80px */
  --space-24:                6rem;      /* 96px */
  --space-28:                7rem;      /* 112px */
  --space-32:                8rem;      /* 128px — editorial mezera mezi sekcemi */
  --space-36:                9rem;      /* 142px */

  /* Sekce spacing — editorial styl = hodne vzduchu */
  --section-gap-mobile:      var(--space-16);  /* 64px */
  --section-gap-tablet:      var(--space-20);  /* 80px */
  --section-gap-desktop:     var(--space-24);  /* 96px */
  --section-gap-wide:        var(--space-32);  /* 128px */


  /* =======================================================================
     LAYOUT
     ======================================================================= */

  --container-sm:            640px;
  --container-md:            768px;
  --container-lg:            1024px;
  --container-xl:            1280px;
  --container-2xl:           1400px;   /* Astra max-width kompatibilni */

  /* Vnitrni padding kontejneru */
  --container-padding:       var(--space-4);    /* 16px mobil */

  /* Grid gap */
  --grid-gap:                var(--space-6);    /* 24px */
  --grid-gap-lg:             var(--space-8);    /* 32px */


  /* =======================================================================
     BORDER
     ======================================================================= */

  --radius-sm:               4px;
  --radius-md:               8px;
  --radius-lg:               12px;
  --radius-xl:               16px;
  --radius-full:             9999px;
  --radius-polygon:          0;        /* Polygon prvky maji ostre hrany */

  --border-width:            1px;
  --border-width-thick:      2px;
  --border-style:            solid;


  /* =======================================================================
     STINY — zelene tintovane (brand-consistent)
     ======================================================================= */

  --shadow-sm:               0 1px 3px rgba(48, 60, 29, 0.08);
  --shadow-md:               0 4px 12px rgba(48, 60, 29, 0.08);
  --shadow-lg:               0 10px 30px rgba(48, 60, 29, 0.1);
  --shadow-xl:               0 20px 60px rgba(48, 60, 29, 0.12);
  --shadow-card:             0 2px 8px rgba(48, 60, 29, 0.06);
  --shadow-card-hover:       0 8px 24px rgba(48, 60, 29, 0.1);


  /* =======================================================================
     PRECHODY (transitions)
     ======================================================================= */

  --transition-fast:         150ms ease;
  --transition-base:         250ms ease;
  --transition-slow:         400ms ease;
  --transition-spring:       350ms cubic-bezier(0.34, 1.56, 0.64, 1);


  /* =======================================================================
     Z-INDEX
     ======================================================================= */

  --z-base:                  1;
  --z-dropdown:              100;
  --z-sticky:                200;   /* Sticky header */
  --z-overlay:               300;   /* Lightbox overlay */
  --z-modal:                 400;   /* Modal / lightbox content */
  --z-toast:                 500;   /* Notifications */
  --z-cookie:                600;   /* Cookie consent banner (vzdy navrchu) */


  /* =======================================================================
     POLYGON — signature design element
     ======================================================================= */

  /* Clip-path pro polygon shape (odvozeno z tvaru loga) */
  --polygon-clip:            polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%);
  --polygon-clip-reverse:    polygon(0% 0%, 100% 0%, 100% 75%, 85% 100%, 0% 100%);
  --polygon-divider:         polygon(0 0, 100% 0, 100% 85%, 0 100%);
  --polygon-divider-reverse: polygon(0 0, 100% 0, 100% 100%, 0 85%);


  /* =======================================================================
     KOMPONENTY — specificky nastaveni
     ======================================================================= */

  /* Header */
  --header-height-mobile:    64px;
  --header-height-desktop:   80px;
  --header-bg:               rgba(48, 60, 29, 0.95);
  --header-bg-scrolled:      rgba(48, 60, 29, 0.98);

  /* Hero */
  --hero-min-height-mobile:  80vh;
  --hero-min-height-desktop: 90vh;

  /* Card */
  --card-padding:            var(--space-6);
  --card-radius:             var(--radius-md);
  --card-bg:                 rgba(246, 248, 228, 0.85);
  --card-bg-hover:           rgba(246, 248, 228, 1);

  /* Button */
  --btn-padding-x:           var(--space-6);
  --btn-padding-y:           var(--space-3);
  --btn-radius:              var(--radius-md);
  --btn-min-height:          48px;     /* A11y tap target */
  --btn-font-weight:         var(--font-weight-semibold);
  --btn-font-size:           var(--text-base);

  /* Form */
  --input-padding:           var(--space-3) var(--space-4);
  --input-radius:            var(--radius-md);
  --input-border:            var(--color-border-strong);
  --input-bg:                #FFFFFF;
  --input-focus-ring:        var(--color-focus-ring);

  /* Footer */
  --footer-bg:               #303C1D;
  --footer-text:             var(--color-text-inverse);
  --footer-text-muted:       var(--color-text-inverse-muted);

  /* Disposition tag (nova komponenta z v3) */
  --tag-padding:             var(--space-2) var(--space-4);
  --tag-radius:              var(--radius-full);
  --tag-bg:                  rgba(150, 195, 139, 0.15);
  --tag-bg-hover:            rgba(150, 195, 139, 0.3);
  --tag-text:                var(--color-primary);
  --tag-font-size:           var(--text-sm);
  --tag-font-weight:         var(--font-weight-semibold);
}


/* ===========================================================================
   RESPONSIVE OVERRIDES — mobile-first breakpointy [master prompt sekce 7]
   =========================================================================== */

/* 576px — vetsi mobily / landscape */
@media (min-width: 576px) {
  :root {
    --container-padding:     var(--space-6);
    --grid-gap:              var(--space-8);
  }
}

/* 768px — tablety */
@media (min-width: 768px) {
  :root {
    --container-padding:     var(--space-8);
    --section-gap-mobile:    var(--section-gap-tablet);
  }
}

/* 1024px — notebooky */
@media (min-width: 1024px) {
  :root {
    --container-padding:     var(--space-10);
    --section-gap-mobile:    var(--section-gap-desktop);
    --grid-gap:              var(--grid-gap-lg);
  }
}

/* 1440px — vetsi monitory */
@media (min-width: 1440px) {
  :root {
    --container-padding:     var(--space-12);
    --section-gap-mobile:    var(--section-gap-wide);
  }
}


/* ===========================================================================
   UTILITY / PRISTUPNOST
   =========================================================================== */

/* Screen-reader only — vizualne skryty, pristupny [AI_zadani_v3 sekce 9] */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus-visible — pristupny focus ring */
*:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: var(--color-focus-ring);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}