/* ═══════════════════════════════════════════════════════════════════
   JOB LEADER — designové tokeny prodejního webu
   ───────────────────────────────────────────────────────────────────
   Převzato 1:1 z JOBLEADER_ATS_Obchodni_Prezentace.html, aby web
   nevypadal jako jiná značka než obchodní prezentace a samotné ATS.
   Zdrojem pravdy pro barvy je tenhle soubor — nikde jinde nehardcodovat.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Plochy */
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --line: #E2E8F0;

  /* Text — od nejsilnějšího po nejslabší */
  --text: #0F172A;
  --body: #334155;
  --muted: #64748B;
  --faint: #94A3B8;

  /* Značka */
  --violet: #7C3AED;
  --violet7: #6D28D9;
  /* Fialová pro TMAVÁ pozadí. Obě fialové výš jsou laděné na bílou:
     na hero (#0B0616) dávají 3,50:1 a 2,81:1, tedy pod AA pro text
     pod 18,66 px. Tenhle odstín je z téže rodiny (violet-400) a dává
     7,34:1. Přidáno 14. 8. 2026 kvůli nadřazenému řádku nad nadpisem. */
  --violet-tmave-pozadi: #A78BFA;
  /* Zelená pro TMAVÁ pozadí. Dnešní #047857 dává na tmavém pruhu akce
     jen 3,64 : 1, tedy pod AA. Emerald-400 dává 10,39 : 1. Přidáno
     25. 8. 2026 při sjednocení tlačítka „Otevřít skutečnou obrazovku". */
  --emerald-tmave-pozadi: #34D399;
  --fuchsia: #D946EF;
  --pink: #EC4899;
  --purple: #9333EA;
  --indigo: #4F46E5;
  --blue: #2563EB;

  /* Stavové */
  --emerald: #10B981;
  --amber: #F59E0B;
  --rose: #E11D48;

  /* Gradienty — CTA vs. „tohle dělá AI" */
  --grad-cta: linear-gradient(to right, #7C3AED, #D946EF, #EC4899);
  /* TMAVÝ PRUH AKCE — jediný zdroj pravdy pro tlačítko „Otevřít
     skutečnou obrazovku". Vzniklo z nálezu Jiřího z předvádění
     (25. 8.): světlý řádek na světlém pozadí lidé nenašli. Barva je
     pozadí hera, tedy nic nového; nová je jen role.
     POUŽÍVÁ SE NA DVOU MÍSTECH: .msn-akce (Microsoft) a .prohlidka-tl
     (WhatsApp). Když se mění, mění se tady — ne v jednom z nich. */
  --akce-tmava: linear-gradient(135deg, #0B0616 0%, #1A0B2E 100%);
  --akce-tmava-najeti: linear-gradient(135deg, #150C24 0%, #2A1148 100%);
  --akce-tlum: rgba(255, 255, 255, .68);
  --grad-ai: linear-gradient(to right, #2563EB, #7C3AED, #D946EF);

  /* STÍN KARTY VE VÝKLADNÍ SKŘÍNI. Jedna hodnota pro všechny tři —
     karta Microsoftu, karta WhatsAppu i výloha. Dřív byly tři různé
     a ta nejsilnější (0 24px 54px) doznívala přes ~50 px, takže
     z mezery 64 px zbylo 13 px čistého bíla a přechod se rozmazal.
     Tohle má dosah ~15 px: karta zůstane nadzvednutá, ale přestane
     vytékat do sousední buňky. Příkaz č. 167 bod 4a. */
  --stin-karty: 0 2px 4px rgba(15, 23, 42, .03),
                0 8px 22px -10px rgba(15, 23, 42, .14);

  /* Typografie — dvě řezy, každý na svou práci.
     Inter je výborná UI čtecí písmo, ale ve velkém displeji je neutrální
     až neosobní a na gradientu se „ztratí". Nadpisy proto nese Sora:
     geometrický grotesk s vlastním charakterem, který drží i v 68 px.
     Latin Extended → česká diakritika i polské/slovenské znaky. */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Sora', var(--font);

  /* Rytmus a poloměry */
  --maxw: 1280px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;
}

/* Tmavý režim — zatím jen deklarace ploch, dolaď se až bude obsah.
   Prodejní web na to nemusí jít, ale ATS dark mode má, takže ať to
   není později přestavba od nuly. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #0B0616;
    --card: #11012D;
    --line: rgba(139, 92, 246, 0.12);
    --text: #FFFFFF;
    --body: #CBD5E1;
    --muted: #94A3B8;
    --faint: #64748B;
  }
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Čísla v tabulkách/metrikách nesmí poskakovat */
.tnum { font-variant-numeric: tabular-nums; }

/* Viditelný focus — přístupnost, ne jen dekorace */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Respektuj systémové omezení animací */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Rozvržení ───────────────────────────────────────────────────── */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: 40px;
}

@media (max-width: 640px) {
  .container { padding-inline: 20px; }
}