/* css/tokens.css
   Created :: 2026-11-01

   Design tokeny — JEDINÉ místo pro barvy, písmo, mezery, zaoblení a stíny.
   Všechny ostatní CSS soubory používají jen tyto proměnné (žádné hex hodnoty natvrdo).
   Přehled s živými vzorky: /admini/settings/templates/index.php (Design system)

   Pořadí načítání: tokens.css → base.css → layout.css (aplikace) / login.css (login) → components.css

   2026-11-01 :: Víc hloubky — barevné světlo v podkladu, skleněné karty, vrstvené stíny (čistě bílé bylo nudné)
*/

:root {
  /* ===== Písmo — jedna rodina, 4 velikosti ===== */
  --font:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs:    14px;   /* VŠE: text, inputy, tlačítka, tabulky, menu, popisky polí */
  --fs-sm: 12px;   /* menší: nápověda, hlavičky tabulek, štítky, meta info, patička */
  --fs-md: 16px;   /* větší: nadpis sekce / karty (h2) */
  --fs-lg: 20px;   /* největší: nadpis stránky (h1) */

  --fw:        400;
  --fw-medium: 500;   /* popisky polí, tlačítka, odkazy v tabulce */
  --fw-bold:   600;   /* nadpisy */

  --lh:       1.5;
  --lh-tight: 1.25;

  /* ===== Barvy — světlé, neutrální šedé + jedna modrá ===== */
  --c-bg:            #f4f6f9;   /* základ pozadí (pod --bg-page) */
  --bg-page:                    /* pozadí stránky: jemné modré a teplé (logo) světlo + přechod */
    radial-gradient(1100px 560px at 0% 0%, rgba(37,99,235,.09), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(245,179,1,.11), transparent 58%),
    linear-gradient(180deg, #f8f9fb 0%, #e9eef6 100%);
  --c-surface:       #ffffff;   /* inputy, plné plochy */
  --c-surface-glass: rgba(255,255,255,.86);   /* karty, tabulky, lišta — sklo nad podkladem */
  --glass-blur:      blur(12px) saturate(160%);
  --c-surface-2:     #f9fafb;   /* hlavička tabulky, hover, vnořené plochy */
  --c-border:        #eaecf0;   /* tenké rámečky a oddělovače */
  --c-border-strong: #d0d5dd;   /* rámeček inputu */

  --c-text:   #101828;          /* hlavní text */
  --c-text-2: #475467;          /* vedlejší text, popisky */
  --c-text-3: #98a2b3;          /* nejméně důležité: placeholder, meta, prázdné hodnoty */

  --c-accent:       #2563eb;    /* primární tlačítko, aktivní tab, focus, cena */
  --c-accent-hover: #1d4ed8;
  --c-accent-soft:  #eff4ff;

  --c-link:       var(--c-text);           /* odkazy NEJSOU modré */
  --c-link-line:  rgba(16,24,40,.25);

  --c-ok:     #067647;  --c-ok-soft:     #ecfdf3;  --c-ok-line:     #abefc6;
  --c-warn:   #b54708;  --c-warn-soft:   #fffaeb;  --c-warn-line:   #fedf89;
  --c-danger: #b42318;  --c-danger-soft: #fef3f2;  --c-danger-line: #fecdca;
  --c-info:   #175cd3;  --c-info-soft:   #eff8ff;  --c-info-line:   #b2ddff;
  --c-muted-soft: #f2f4f7;

  /* ===== Mezery — násobky 4px ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ===== Tvary ===== */
  --r-sm: 6px;     /* štítky uvnitř, malé prvky */
  --r:    8px;     /* inputy, tlačítka */
  --r-lg: 14px;    /* karty, tabulky */
  --r-full: 999px;

  --shadow-sm:   0 1px 2px rgba(16,24,40,.05);
  --shadow:      0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.07);   /* karty, tabulky */
  --shadow-hover:0 2px 4px rgba(16,24,40,.05), 0 16px 36px rgba(16,24,40,.11);  /* karta pod myší */
  --shadow-lg:   0 12px 32px rgba(16,24,40,.12);
  --shadow-primary: 0 1px 2px rgba(37,99,235,.25), 0 6px 16px rgba(37,99,235,.28);  /* primární tlačítko */
  --focus:     0 0 0 3px rgba(37,99,235,.18);

  /* ===== Ovládací prvky ===== */
  --control-h:    36px;   /* input, select, tlačítko — vše stejně vysoké */
  --control-h-sm: 30px;   /* malé tlačítko, filtry */

  /* ===== Layout ===== */
  --topbar-h:  60px;
  --sidebar-w: 200px;
  --content-max: 1440px;
  --form-max:    720px;
}