/* ═══════════════════════════════════════════════════════════════
   variables.css — CSS PREMENNÉ (téma)
   ───────────────────────────────────────────────────────────────
   TODO: Tu meň farby, fonty a veľkosti — zmena sa prejaví
         na celom webe naraz.
═══════════════════════════════════════════════════════════════ */

:root {
  /* ── WordPress-editable defaults (overridden inline from ACF) ── */
  --wp-clr-primary:    #17608d;
  --wp-clr-primary-dk: #0f4f76;
  --wp-clr-accent:     #fdc800;
  --wp-clr-dark:       #17608d;
  --wp-clr-text:       #222222;
  --wp-clr-muted:      #6c757d;
  --wp-clr-border:     #e4e8f0;
  --wp-bg-page:        #f4f7fb;
  --wp-bg-alt:         #ffffff;
  --wp-bg-card:        #ffffff;
  --wp-bg-header:      rgba(255, 255, 255, 0.97);
  --wp-hero-grad-start:#0a3b66;
  --wp-hero-grad-end:  #0b5ed7;

  /* ── Farby značky ─────────────────────────────────────────
     TODO: Nahraď #0b5ed7 farbou tvojej značky */
  --clr-primary:    var(--wp-clr-primary, #17608d);   /* hlavná modrá — tlačidlá, ikony, akcenty */
  --clr-primary-dk: var(--wp-clr-primary-dk, #0f4f76); /* tmavšia modrá — hover stav tlačidla     */
  --clr-accent:     var(--wp-clr-accent, #fdc800);     /* oranžová — odznaky, zvýraznenia          */
  --clr-dark:       var(--wp-clr-dark, #17608d);       /* nadpisy, logo, footer                    */
  --clr-text:       var(--wp-clr-text, #222222);       /* základný text                            */
  --clr-muted:      var(--wp-clr-muted, #6c757d);      /* sekundárny text, placeholders            */
  --clr-border:     var(--wp-clr-border, #e4e8f0);     /* okraje kariet, inputov                   */

  /* ── Pozadia ──────────────────────────────────────────────
     TODO: Zmeň --bg-page pre inú farbu pozadia stránky */
  --bg-page:        var(--wp-bg-page, #f4f7fb);
  --bg-alt:         var(--wp-bg-alt, #ffffff);   /* striedajúce sa sekcie                    */
  --bg-card:        var(--wp-bg-card, #ffffff);   /* pozadie kariet                           */
  --bg-header:      var(--wp-bg-header, rgba(255, 255, 255, 0.97));

  /* ── Typografia ───────────────────────────────────────────
     TODO: Zmeň font tu AJ v <link> tagu v index.html
     Alternatívy: Nunito | Inter | Raleway | Source Sans 3 */
  --font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-size-base: 16px;

  /* ── Medzery ──────────────────────────────────────────────
     TODO: Uprav medzery podľa potreby */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;

  /* ── Layout ───────────────────────────────────────────────
     TODO: --container-max určuje maximálnu šírku obsahu */
  --container-max: 1200px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  /* ── Tiene ────────────────────────────────────────────────*/
  --shadow-sm:  0 2px 8px   rgba(10, 59, 102, 0.06);
  --shadow-md:  0 6px 24px  rgba(10, 59, 102, 0.10);
  --shadow-lg:  0 12px 40px rgba(10, 59, 102, 0.14);

  /* ── Prechody ─────────────────────────────────────────────*/
  --transition: 0.22s ease;
}