/* Sklo: společné tokeny vzhledu pro web (app/globals.css ho načítá přes @import) i aplikaci (zaklad.css ho předpokládá).
   Jedno místo pro světlý i tmavý režim: paleta, sklo, barevné světlo pod sklem, tlačítka, stíny, poloměry, písmo a pohyb.
   Světlý režim podle Boltshiftu a menu s černou pilulkou, tmavý podle tmavého dashboardu z podkladů (2026-10-08).
   Kontrast (WCAG): #646b78 na bílé 5,3 : 1 a na #eef0f4 4,7 : 1, bílá na #2563eb 5,2 : 1, #8e95a3 na tmavé kartě #12151b 6,1 : 1,
   #9db2ff na #12151b 8,4 : 1. Stíny a zaoblení jen přes tyhle proměnné (hlídá test dashboard-vzhled). */
:root {
  color-scheme: light;
  --pozadi: #eef0f4;
  --pozadi-hluboke: #e3e6ec;
  --pozadi-jemne: #f6f7f9;
  --karta: #ffffff;
  --linka: #e6e8ed;
  --linka-jemna: #eff1f4;
  --linka-silna: #d4d8e0;
  --inkoust: #0b0d12;
  --inkoust-2: #3a4150;
  --tlumeny: #646b78;
  /* akcent: modrá z podkladu Boltshift, stejná na webu (tailwind.config.ts: accent) */
  --akcent: #2563eb;
  --akcent-tmavy: #1d4ed8;
  --akcent-svetly: #eef3ff;
  --zelena: #047857;
  --zelena-svetla: #ecfdf5;
  --cervena: #b91c1c;
  --cervena-svetla: #fef2f2;
  /* barvy zdrojů dat: tečka u názvu karty (světlá a linka pro plochy a rámečky). Google a Seznam jsou oranžové,
     aby se nepletly s modrým akcentem. */
  --ai: #6d28d9;
  --ai-svetla: #f1ecfe;
  --ai-linka: #ddd6fe;
  --google: #c2410c;
  --google-svetla: #fff1e7;
  --google-linka: #fed7aa;
  --web: #047857;
  --web-svetla: #e3f8ef;
  --web-linka: #a7f3d0;
  /* hlavní tlačítko: inkoustová pilulka (ve tmavém režimu bílá, jako „Get Started“ v podkladu s ceníkem) */
  --tl-pozadi: #0b0d12;
  --tl-pozadi-hover: #262a33;
  --tl-text: #ffffff;
  /* sklo: průsvitná plocha, rozmazané pozadí pod ní a světlá horní hrana */
  --sklo: rgba(255, 255, 255, 0.66);
  --sklo-silne: rgba(255, 255, 255, 0.82);
  --sklo-linka: rgba(15, 23, 42, 0.09);
  --sklo-rozmazani: blur(18px) saturate(1.8);
  /* barevné světlo pod sklem (vrstva body::before, drží se při posunu): modré vlevo nahoře, oranžové vpravo, fialové dole */
  --svetla: radial-gradient(52vw 46vw at 4% -6%, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0) 70%),
    radial-gradient(46vw 40vw at 104% 22%, rgba(251, 146, 60, 0.26) 0%, rgba(251, 146, 60, 0) 70%),
    radial-gradient(50vw 40vw at 34% 112%, rgba(139, 92, 246, 0.17) 0%, rgba(139, 92, 246, 0) 70%),
    radial-gradient(30vw 26vw at 70% 96%, rgba(244, 114, 182, 0.12) 0%, rgba(244, 114, 182, 0) 70%);
  /* průsvitné plochy: karty a dlaždice skoro bílé, panel a hlavička víc průhledné (světlo jimi prosvítá) */
  --plocha: rgba(255, 255, 255, 0.8);
  --plocha-jemna: rgba(246, 247, 250, 0.72);
  --plocha-panel: rgba(255, 255, 255, 0.56);
  /* světlá hrana skla: nahoře plná, dolů slábne (maska v .karta::before a spol.), jako na webu */
  --sklo-hrana: linear-gradient(165deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 26%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.6) 100%);
  /* skleněné tlačítko: světlejší nahoře, dole průsvitné; odlesk přejede při najetí */
  --sklo-tlacitko: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.58) 100%);
  --sklo-tlacitko-hover: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.86) 100%);
  --sklo-tlacitko-linka: rgba(15, 23, 42, 0.1);
  --odlesk: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 68%);
  --odlesk-primarni: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0) 68%);
  --kurzor-svetlo: rgba(37, 99, 235, 0.08);
  /* kruhy s ikonou zdroje: plný barevný přechod a bílá ikona */
  --prechod-ai: linear-gradient(140deg, #a78bfa 0%, #7c3aed 55%, #6d28d9 100%);
  --prechod-google: linear-gradient(140deg, #fdba74 0%, #f97316 50%, #ea580c 100%);
  --prechod-web: linear-gradient(140deg, #6ee7b7 0%, #10b981 50%, #047857 100%);
  --prechod-ucet: linear-gradient(140deg, #93c5fd 0%, #3b82f6 50%, #2563eb 100%);
  /* záře zdroje v rohu karty */
  --zare-ai: rgba(124, 58, 237, 0.09);
  --zare-google: rgba(249, 115, 22, 0.1);
  --zare-web: rgba(16, 185, 129, 0.09);
  /* zvýrazněné dlaždice: modrá (odpovědi AI) a oranžová (kliknutí z Googlu). Světlo svítí z pravého horního rohu, text vlevo
     leží na tmavší části, takže bílá drží kontrast aspoň 4,5 : 1 (#2563eb 5,2 : 1, #c9480d 4,7 : 1). */
  --zvyrazneni: radial-gradient(55% 60% at 100% 0%, rgba(147, 197, 253, 0.55) 0%, rgba(147, 197, 253, 0) 70%),
    linear-gradient(210deg, #3b82f6 0%, #2563eb 26%, #1d4ed8 58%, #1e40af 100%);
  --zvyrazneni-2: radial-gradient(55% 60% at 100% 0%, rgba(253, 170, 96, 0.75) 0%, rgba(253, 170, 96, 0) 70%),
    linear-gradient(210deg, #fb8a3c 0%, #d9520e 12%, #c2430c 26%, #b03b0c 55%, #9a3412 100%);
  --pisma: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --polomer-karta: 20px;
  --polomer-sklo: 28px;
  --polomer: 12px;
  --polomer-mala: 8px;
  --pilulka: 999px;
  --stin: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -20px rgba(16, 24, 40, 0.2);
  --stin-vyssi: 0 18px 40px -12px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.06);
  --stin-panel: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 44px -26px rgba(16, 24, 40, 0.3);
  --stin-sklo: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 14px -6px rgba(16, 24, 40, 0.12);
  --stin-sklo-hover: inset 0 1px 0 #ffffff, 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 24px -12px rgba(16, 24, 40, 0.26);
  --stin-tlacitko: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(11, 13, 18, 0.2), 0 6px 16px -6px rgba(11, 13, 18, 0.45);
  /* při najetí hlavní tlačítko zespodu prosvítí modrým a oranžovým světlem */
  --stin-tlacitko-hover: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(11, 13, 18, 0.2),
    -8px 12px 26px -12px rgba(37, 99, 235, 0.7), 8px 12px 26px -12px rgba(249, 115, 22, 0.6);
  --stin-fokus: 0 0 0 4px rgba(37, 99, 235, 0.16);
  --stin-zvyrazneni: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 36px -14px rgba(37, 99, 235, 0.55);
  --stin-zvyrazneni-2: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 36px -14px rgba(234, 88, 12, 0.5);
  --lesk-tlacitko: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%);
  /* vnitřní lesk: světlá horní hrana dlaždice uvnitř karty a lesk barevného kruhu s ikonou */
  --stin-vnitrni: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --stin-kruh: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 8px rgba(0, 0, 0, 0.12);
  --pohyb: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Tmavý režim: téměř černé pozadí, karty o stupeň světlejší s jemnou linkou, modrofialový akcent a bílá pilulka jako hlavní
   tlačítko. Zapíná ho jen uživatel (public/tema.js, na webu NavClient.tsx), klíč citovano-tema. Stejné hodnoty platí
   v tmavých sekcích webu (.tone-dark: výzva a patička ve světlém režimu), aby sklo a tlačítka měly jeden tmavý vzhled. */
:root[data-tema="tmave"],
.tone-dark {
  color-scheme: dark;
  --pozadi: #07080b;
  --pozadi-hluboke: #1a1e26;
  --pozadi-jemne: #171a21;
  --karta: #12151b;
  --linka: #232730;
  --linka-jemna: #1c2028;
  --linka-silna: #343a46;
  --inkoust: #f2f4f8;
  --inkoust-2: #c4c9d3;
  --tlumeny: #8e95a3;
  --akcent: #8ea8ff;
  --akcent-tmavy: #b3c3ff;
  --akcent-svetly: #1a2135;
  --zelena: #34d399;
  --zelena-svetla: #0e2a21;
  --cervena: #f87171;
  --cervena-svetla: #2c1417;
  --ai: #a78bfa;
  --ai-svetla: #1e1930;
  --ai-linka: #3c3165;
  --google: #fb923c;
  --google-svetla: #2a1b10;
  --google-linka: #5e3617;
  --web: #34d399;
  --web-svetla: #0e2a21;
  --web-linka: #1d4d3d;
  --tl-pozadi: #f4f5f7;
  --tl-pozadi-hover: #ffffff;
  --tl-text: #0b0d12;
  --sklo: rgba(255, 255, 255, 0.06);
  --sklo-silne: rgba(22, 25, 32, 0.82);
  --sklo-linka: rgba(255, 255, 255, 0.11);
  --svetla: radial-gradient(52vw 46vw at 4% -6%, rgba(59, 110, 246, 0.26) 0%, rgba(59, 110, 246, 0) 70%),
    radial-gradient(46vw 40vw at 104% 22%, rgba(234, 88, 12, 0.18) 0%, rgba(234, 88, 12, 0) 70%),
    radial-gradient(50vw 40vw at 34% 112%, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0) 70%),
    radial-gradient(30vw 26vw at 70% 96%, rgba(219, 39, 119, 0.1) 0%, rgba(219, 39, 119, 0) 70%);
  --plocha: rgba(18, 21, 27, 0.78);
  --plocha-jemna: rgba(255, 255, 255, 0.04);
  --plocha-panel: rgba(16, 19, 25, 0.62);
  --sklo-hrana: linear-gradient(165deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.1) 100%);
  --sklo-tlacitko: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%);
  --sklo-tlacitko-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  --sklo-tlacitko-linka: rgba(255, 255, 255, 0.13);
  --odlesk: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 68%);
  --odlesk-primarni: linear-gradient(105deg, rgba(91, 124, 255, 0) 32%, rgba(91, 124, 255, 0.22) 50%, rgba(91, 124, 255, 0) 68%);
  --kurzor-svetlo: rgba(142, 168, 255, 0.1);
  --zare-ai: rgba(167, 139, 250, 0.1);
  --zare-google: rgba(251, 146, 60, 0.09);
  --zare-web: rgba(52, 211, 153, 0.08);
  --zvyrazneni: radial-gradient(55% 60% at 100% 0%, rgba(147, 170, 255, 0.45) 0%, rgba(147, 170, 255, 0) 70%),
    linear-gradient(210deg, #5b7cff 0%, #3f5fe0 30%, #2f49c4 62%, #23338a 100%);
  --zvyrazneni-2: radial-gradient(55% 60% at 100% 0%, rgba(253, 186, 116, 0.5) 0%, rgba(253, 186, 116, 0) 70%),
    linear-gradient(210deg, #f97316 0%, #c9480d 20%, #a93a0c 46%, #7c2d12 78%, #5c210e 100%);
  --stin: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --stin-vyssi: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --stin-panel: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  --stin-sklo: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.4);
  --stin-sklo-hover: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 24px -12px rgba(0, 0, 0, 0.7);
  --stin-tlacitko: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px -8px rgba(142, 168, 255, 0.35);
  --stin-tlacitko-hover: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0, 0, 0, 0.4), -8px 12px 28px -12px rgba(91, 124, 255, 0.75), 8px 12px 28px -12px rgba(249, 115, 22, 0.55);
  --stin-fokus: 0 0 0 4px rgba(142, 168, 255, 0.22);
  --stin-zvyrazneni: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 40px -14px rgba(63, 95, 224, 0.6);
  --stin-zvyrazneni-2: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 40px -14px rgba(234, 88, 12, 0.45);
  --lesk-tlacitko: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(11, 13, 18, 0.06) 100%);
  --stin-vnitrni: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}