/* ModulTheme 2026-07-04 — generováno skriptem build.sh, NEEDITOVAT ručně (upravujte src/) */
/* ============================================================
   ModulTheme — designové tokeny (jediný zdroj pravdy vzhledu)
   ------------------------------------------------------------
   Hodnoty pocházejí z Figma návrhu „ModulDom Formulář Popávka".
   Všechny tokeny mají prefix --mt- (Modul Theme), aby se nepletly
   s proměnnými konkrétních aplikací. Aplikace si své vlastní
   proměnné namapuje na tyto tokeny (např. --navy: var(--mt-primary)).

   Použití v novém projektu:
   1. Načtěte dist/modul-theme.css PŘED vlastním CSS aplikace.
   2. Načtěte font Poppins z Google Fonts (viz README).
   3. Barvy/zaoblení/stíny berte výhradně z těchto tokenů.
   ============================================================ */
:root{
  /* ── ZNAČKOVÉ BARVY ──
     Primární modrá = důvěryhodnost, hlavičky, texty nadpisů.
     Akcentní žlutá = akční prvky (tlačítka, zvýraznění, podtrhy). */
  --mt-primary:#204179;        /* dominantní modrá z Figmy */
  --mt-primary-dark:#1a3563;   /* hover/aktivní stav modré */
  --mt-primary-darker:#132648; /* nejtmavší tón — horní lišty, gradienty */
  --mt-primary-mid:#2d5aa6;    /* světlejší modrá — gradienty, odkazy */
  --mt-primary-100:#e3ecf8;    /* světlá tinta — zvýrazněné řádky, pozadí ikon */
  --mt-primary-050:#eff4fb;    /* nejsvětlejší tinta — informační panely (styl „blue-50") */

  --mt-accent:#fad14e;         /* akční žlutá z Figmy */
  --mt-accent-dark:#e9bc2f;    /* hover stav žluté */
  --mt-accent-light:#fdf6dd;   /* světlá tinta žluté — jemná zvýraznění */

  /* ── NEUTRÁLNÍ BARVY ──
     Pozadí stránky je teplá světle šedá (#f2f1ef) dle návrhu,
     texty jsou odvozené od primární modré pro konzistentní tón. */
  --mt-bg:#f2f1ef;             /* pozadí celé stránky */
  --mt-surface:#ffffff;        /* pozadí karet a polí */
  --mt-gray:#f6f6f4;           /* jemné pozadí uvnitř karet */
  --mt-gray-mid:#e9e8e4;       /* dělicí linky, okraje */
  --mt-gray-dark:#cfd4de;      /* okraje formulářových polí */
  --mt-gray-text:#8b95a9;      /* potlačené popisky */
  --mt-text:#1c2b45;           /* hlavní text */
  --mt-text-2:#3a4a68;         /* sekundární text */
  --mt-text-3:#6e7d99;         /* terciární text, meta údaje */

  /* ── STAVOVÉ BARVY (úspěch / chyba) ── */
  --mt-success:#0f6b35;
  --mt-success-light:#e6f5ee;
  --mt-danger:#b91c1c;

  /* ── TYPOGRAFIE ──
     Poppins je primární font celého theme (viz Figma).
     Fallback na systémové bezpatkové písmo, kdyby se font nenačetl. */
  --mt-font:'Poppins',system-ui,sans-serif;

  /* ── ZAOBLENÍ ──
     Návrh používá výrazně kulaté rohy (karty ~16px, tlačítka ~10px). */
  --mt-radius-sm:10px;         /* tlačítka, pole, malé prvky */
  --mt-radius-md:12px;         /* panely, vnitřní bloky */
  --mt-radius-lg:16px;         /* karty (odpovídá rounded-2xl z návrhu) */
  --mt-radius-pill:999px;      /* štítky/badge — plně kulaté */

  /* ── STÍNY ──
     Odvozené od primární modré, aby stín ladil s barevností. */
  --mt-shadow-sm:0 1px 4px rgba(32,65,121,.06),0 4px 14px rgba(32,65,121,.05);
  --mt-shadow-md:0 6px 24px rgba(32,65,121,.10),0 2px 8px rgba(32,65,121,.07);
  --mt-shadow-lg:0 20px 60px rgba(32,65,121,.18);

  /* ── PŘECHODY ── */
  --mt-transition:.18s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   ModulTheme — sdílené komponenty
   ------------------------------------------------------------
   Obecné, projektově nezávislé UI prvky postavené výhradně
   nad tokeny z tokens.css. Třídy mají prefix .mt-, takže
   nekolidují s existujícím CSS aplikací.

   Aplikace NEMUSÍ tyto třídy používat — může si jen namapovat
   tokeny na vlastní proměnné. Třídy slouží novým projektům
   a jako živý vzorník (viz demo/index.html).
   ============================================================ */

/* ── TLAČÍTKA ──
   Základ: velká klikací plocha, kulaté rohy, jemná animace.
   Primární akce = žlutá s modrým textem (dle Figmy: „akční tlačítka žlutá"). */
.mt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--mt-radius-sm);font-family:var(--mt-font);font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all var(--mt-transition);white-space:nowrap;text-decoration:none}
.mt-btn:active{transform:scale(.97)}
.mt-btn:focus-visible{outline:3px solid var(--mt-primary-mid);outline-offset:2px}

/* Primární (žluté) tlačítko — hlavní akce na stránce („Pokračovat", „Odeslat"). */
.mt-btn-accent{background:var(--mt-accent);color:var(--mt-primary);box-shadow:0 2px 8px rgba(250,209,78,.4)}
.mt-btn-accent:hover{background:var(--mt-accent-dark);transform:translateY(-1px);box-shadow:0 4px 14px rgba(250,209,78,.45)}

/* Sekundární (modré) tlačítko — méně důležité akce; žlutý text dle návrhu. */
.mt-btn-primary{background:var(--mt-primary);color:var(--mt-accent);box-shadow:0 2px 6px rgba(32,65,121,.3)}
.mt-btn-primary:hover{background:var(--mt-primary-dark);transform:translateY(-1px)}

/* Tiché tlačítko — rušení, návrat zpět. */
.mt-btn-ghost{background:var(--mt-surface);color:var(--mt-primary);border:1.5px solid var(--mt-gray-dark)}
.mt-btn-ghost:hover{background:var(--mt-primary-050);border-color:var(--mt-primary-mid)}

/* ── KARTA ──
   Bílý blok s výrazným zaoblením a jemným stínem — základní
   stavební kámen layoutu (odpovídá rounded-2xl kartám z Figmy). */
.mt-card{background:var(--mt-surface);border-radius:var(--mt-radius-lg);border:1px solid var(--mt-gray-mid);box-shadow:var(--mt-shadow-sm);overflow:hidden;transition:box-shadow var(--mt-transition)}
.mt-card:hover{box-shadow:var(--mt-shadow-md)}
.mt-card-body{padding:20px}

/* ── NADPIS SE ŽLUTÝM PODTRHEM ──
   Charakteristický prvek návrhu: nadpis + krátká žlutá linka pod ním. */
.mt-heading{font-family:var(--mt-font);color:var(--mt-primary);font-weight:600;line-height:1.3;margin:0 0 8px}
.mt-heading-accent::after{content:'';display:block;width:80px;height:4px;background:var(--mt-accent);margin-top:8px;border-radius:2px}

/* ── KRUHOVÁ IKONKA ──
   Modrý kruh se žlutým symbolem (check, hvězda…) — používá se
   u odrážek benefitů v marketingových panelech. */
.mt-icon-circle{width:32px;height:32px;border-radius:50%;background:var(--mt-primary);color:var(--mt-accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mt-icon-circle svg{width:16px;height:16px}

/* ── INFORMAČNÍ PANEL ──
   Světle modrý blok pro doprovodné texty a nápovědy (styl „blue-50"). */
.mt-panel-info{background:var(--mt-primary-050);border-radius:var(--mt-radius-lg);padding:16px;color:var(--mt-text-2)}

/* ── ŠTÍTEK (BADGE) ──
   Malý plně kulatý štítek, např. „ZDARMA" — modré pozadí, žlutý text. */
.mt-badge{display:inline-block;padding:2px 10px;background:var(--mt-primary);color:var(--mt-accent);font-family:var(--mt-font);font-size:10px;font-weight:700;border-radius:var(--mt-radius-pill);text-transform:uppercase;letter-spacing:.06em}

/* ── FORMULÁŘOVÉ POLE ──
   Pole s popiskem a nápovědou (title = nativní tooltip na hover/focus).
   Každé pole má mít tooltip vysvětlující, PROČ údaj sbíráme. */
.mt-field{display:flex;flex-direction:column;gap:6px;font-family:var(--mt-font)}
.mt-field label{font-size:13px;font-weight:600;color:var(--mt-primary)}
.mt-field input,.mt-field select,.mt-field textarea{border:1.5px solid var(--mt-gray-dark);border-radius:var(--mt-radius-sm);font-family:var(--mt-font);font-size:14px;color:var(--mt-text);padding:10px 12px;outline:none;background:var(--mt-surface);transition:border-color var(--mt-transition),box-shadow var(--mt-transition);width:100%}
.mt-field input:focus,.mt-field select:focus,.mt-field textarea:focus{border-color:var(--mt-primary);box-shadow:0 0 0 3px rgba(32,65,121,.12)}
/* Drobná nápověda pod polem — doplňuje tooltip pro lepší přístupnost. */
.mt-field .mt-hint{font-size:12px;color:var(--mt-text-3)}