/* ============================================================
   tokens.css – sdílený design systém EBO (Blok 1)
   Jeden zdroj pravdy pro barvy, spacing, radius, stíny, typografii.
   Linkuje se ve VŠECH stránkách (admin i klient i veřejné) PŘED jejich CSS.
   ============================================================ */
:root{
  /* --- Brand --- */
  --brand-purple:#5546ba;
  --brand-purple-dark:#4839a8;
  --brand-purple-deep:#3a2d88;
  --brand-purple-soft:#eae8f6;
  --brand-purple-mist:#f5f4fb;
  --brand-orange:#F26522;
  --brand-orange-dark:#d9571a;
  --brand-orange-light:#FF9A5C;
  --brand-orange-soft:#fef4ee;
  /* Oranžová pro TEXT. Svítivá --brand-orange má na bílé jen 3,15:1, takže neprojde
     ani jako velký nadpis (limit 4,5:1). Tenhle odstín má 7,39:1 na bílé a 7,09:1
     na --g50, tedy AAA na obou podkladech, a jako pozadí s bílým textem taky 7,39:1.
     Svítivá oranžová zůstává na pozadí tlačítek a odznaků. */
  --brand-orange-text:#8f3d0f;

  /* --- Stavové barvy (text + pozadí) --- */
  --ok:#159a5f;        --ok-bg:#e9faf2;
  /* Zelená pro TEXT. Svítivá --green #1EBE78 má na bílé jen 2,42:1. Tenhle odstín
     má 8,08:1 na bílé a 7,32:1 na --g100. Na svítivé zelené jako pozadí AAA JDE
     (na rozdíl od oranžové): tmavý text tam má 7,62:1. */
  --brand-green-text:#0b5c37;
  --warn:#b45309;      --warn-bg:#fdf3e3;
  --bad:#c2362c;       --bad-bg:#fdecea;
  --info:#4839a8;      --info-bg:#eae8f6;

  /* --- Neutrály / povrchy (sdílený zdroj pro karty, okraje, text) --- */
  --surface:#ffffff;
  --surface-2:#f7f7fb;
  --border:#e6e4f0;
  --ink:#1f1d36;
  --ink-soft:#43405e;

  /* --- Programové (tarifní) barvy --- */
  --tarif-mastermind:#5546ba;
  --tarif-klub:#F9B13D;
  --tarif-masterclass:#F26522;
  --tarif-free:#1EBE78;

  /* --- Spacing škála --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* --- Radius škála --- */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* --- Stíny (jednotné, sladěné s adminem) --- */
  --shadow-sm:0 2px 8px rgba(91,75,200,.05);
  --shadow-md:0 6px 24px rgba(91,75,200,.08);
  --shadow-lg:0 16px 44px rgba(91,75,200,.12);

  /* --- Typografie --- */
  --font-sans:'Figtree',system-ui,-apple-system,sans-serif;
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;

  /* --- Pohyb --- */
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ============================================================
     Doplněno 10.8.2026 po auditu: proměnné, které se v CSS používaly,
     ale nikde se nedefinovaly. Bez nich `var(--x)` propadne a vlastnost
     se zahodí jako neplatná, aniž by to cokoliv nahlásilo.

     Tři z nich neměly ani záložní hodnotu, takže se opravdu nic nepoužilo:
       --body         48x v admin.css jako font-family (text bral děděné písmo)
       --purple-light  4x jako barva okraje (okraj bral barvu textu)
       --green-base    1x jako pozadí odznaku (pozadí zůstalo průhledné)
     Zbytek zálohu měl, takže se vzhled nemění; jsou tu proto, aby paleta
     byla na jednom místě a dala se změnit. Hodnoty odpovídají těm zálohám.
     ============================================================ */

  /* Písmo pro běžný text. admin.css ho čeká pod jménem --body. */
  --body:var(--font-sans);

  /* Povrchy a linky */
  --card:#ffffff;
  --bg-soft:#f5f4fa;
  --g150:#eceaf3;
  --line:rgba(0,0,0,.08);

  /* Text */
  --ink-faint:#4a4661;
  --text-soft:#43405e;

  /* Světlá varianta brandové fialové (odvozeno z --brand-purple, ne cizí odstín) */
  --purple-light:#b2ace0;

  /* Zelená pro odznaky (stejná jako --ok) */
  --green-base:#1EBE78;
  --bad-soft:#fbe9e7;

  /* Stavy bodů analýzy webu (wa = web analýza, sc = stav klienta) */
  --wa-sc-purple:#5546ba;
  --wa-sc-done:#1EBE78;
  --wa-sc-ok:#159a5f;
  --wa-sc-info:#4839a8;
  --wa-sc-warn:#b45309;
  --wa-sc-bad:#c2362c;
  --wa-sc-muted:#9a95b0;
  --wa-sc-off:#b0b0bd;
  /* ============================================================
     KROK 1 REDESIGNU ADMINU (22. 9. 2026, návrh z 18. 9.): jedna sada pravidel.
     admin.css od teď žádné vlastní hexy nemá – jeho :root jsou jen aliasy sem.
     Písmo 6 velikostí, text 3 úrovně šedé, zaoblení 5 hodnot, stavy 4 dvojice.
     ============================================================ */
  --fs-menu:11px; --fs-meta:12.5px; --fs-body:14px; --fs-h2:16px; --fs-h1:24px; --fs-kpi:28px;
  --r-tag:6px; --r-ctl:8px; --r-card:10px; --r-modal:16px;
  --text-main:#1f1d36; --text-body:#43405e; --text-meta:#625e7a;
  --line-soft:#e6e4f0; --line-strong:#d0cde2;
  --ok-text:#0b5c37; --warn-text:#8a3f06; --bad-text:#9e2a22; --info-text:#3a2d88;
  --brand-purple-ink:#1a1248;
  /* Oranžová pro text v adminu (Pavel: #C2410C na světlé, viz reference-oranzova-a-kontrast) */
  --brand-orange-text-admin:#c2410c;
}

/* ===== Sdílené komponenty stavů (admin i klient) ===== */

/* Spinner */
@keyframes ui-spin{to{transform:rotate(360deg)}}
.ui-spinner{display:inline-block;width:22px;height:22px;border:2.5px solid var(--brand-purple-soft);border-top-color:var(--brand-purple);border-radius:50%;animation:ui-spin .8s linear infinite;flex:0 0 auto}
.ui-spinner--sm{width:15px;height:15px;border-width:2px}

/* Loading blok */
.ui-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:44px 20px;color:var(--brand-purple-deep);font-size:var(--fs-md)}

/* Skeleton */
@keyframes ui-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ui-skeleton{background:linear-gradient(90deg,rgba(20,17,42,.05) 25%,rgba(20,17,42,.09) 37%,rgba(20,17,42,.05) 63%);background-size:200% 100%;animation:ui-shimmer 1.4s ease infinite;border-radius:var(--r-md);min-height:14px}

/* Prázdný stav */
.ui-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:48px 24px;color:var(--brand-purple-deep)}
.ui-empty__icon{color:var(--brand-purple);opacity:.8;margin-bottom:2px}
.ui-empty__title{font-size:var(--fs-lg);font-weight:800;color:#1f1d36}
.ui-empty__text{font-size:var(--fs-md);color:#43405e;max-width:420px}

/* Chybový stav */
.ui-error{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:40px 24px;color:var(--bad)}
.ui-error__title{font-size:var(--fs-lg);font-weight:800}
.ui-error__text{font-size:var(--fs-md);color:#43405e;max-width:420px}

/* ===== Loader (text + spinner) – sdílené (používá i klientská sekce, kde dřív spinner chyběl) ===== */
.loader{display:flex;align-items:center;justify-content:center;gap:10px;padding:30px 20px;color:var(--brand-purple-deep,#3a2d88);font-size:var(--fs-md,14px)}
.loader__spinner{display:inline-block;width:20px;height:20px;border:2.5px solid var(--brand-purple-soft,#eae8f6);border-top-color:var(--brand-purple,#5546ba);border-radius:50%;animation:ui-spin .8s linear infinite;flex:0 0 auto}

/* ===== JEDNA SADA KARET – kanonická karta (admin i klient i veřejné) =====
   Jeden rám pro VŠECHNY karty: bílé pozadí, jednotný okraj, radius a stín.
   Modifikátory: --pad (vnitřní odsazení), --interactive (hover lift),
   --flat (bez stínu), --accent (jemné fialové pozadí).
   Strukturní prvky: __head / __title / __body. */
.ui-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.ui-card--pad{padding:var(--sp-5)}
.ui-card--flat{box-shadow:none}
.ui-card--accent{background:var(--brand-purple-mist)}
.ui-card--interactive{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .15s ease;cursor:pointer}
.ui-card--interactive:hover{border-color:var(--brand-purple-soft);box-shadow:var(--shadow-md)}
.ui-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.ui-card__title{font-size:var(--fs-lg);font-weight:800;color:var(--ink);margin:0;letter-spacing:-.2px}
.ui-card__body{font-size:var(--fs-md);color:var(--ink-soft);line-height:1.55}

/* ===== Validace formulářů – sdílený stav neplatného pole ===== */
.is-invalid,input.is-invalid,textarea.is-invalid,select.is-invalid{border-color:var(--bad,#c2362c)!important;box-shadow:0 0 0 3px rgba(194,54,44,.12)!important}
.field-msg{display:none;color:var(--bad,#c2362c);font-size:0.875rem;font-weight:600;margin-top:4px}
.field-msg.show{display:block}