/* MediaMC OS — prodejní web: design tokeny
 * Zdroj hodnot: kontext/PRODEJNI_WEB_BLUEPRINT.md, oddíly "Design tokeny —
 * barvy", "Typografie", "Layout, šířky a mezery".
 *
 * Metoda převzatá z PublicMC (admin/ui/tokens/base.css): vlastní prefix,
 * všechno v :root, jeden soubor. Prefix je --mw- (marketing web), aby se
 * tokeny nikdy nepotkaly s --pmc- z administrace ani s --editor-.
 *
 * PRAVIDLO: v blocích a komponentách se nesmí objevit hexadecimální hodnota.
 * Když barva chybí, přidá se sem, ne do bloku.
 */

:root {
  /* ---- Barvy: základ ------------------------------------------------- */
  --mw-bg: #0b0f16;
  --mw-surface-1: #121925;
  --mw-surface-2: #161e2a;
  --mw-border: #273244;
  --mw-text: #f8fafc;
  --mw-text-muted: #9aa8bb;

  /* Odvozené povrchy — blueprint je neuvádí, ale gradient a hover se bez
     nich nedají udělat bez hexu natvrdo v bloku. */
  --mw-surface-3: #1c2534;
  --mw-border-strong: #475569;
  --mw-overlay: rgba(11, 15, 22, 0.82);

  /* ---- Barvy: akcenty ------------------------------------------------ */
  /* Magenta = akce a značka. Modrá = navigace. Zelená = pozitivní stav.
     Oranžová = čekání. Červená = chyba/blokátor. Fialová = AI. Cyan = data. */
  --mw-cta: #ff2675;
  --mw-cta-hover: #e51663;
  --mw-cta-text: #ffffff;
  --mw-nav: #2563eb;
  --mw-ai: #8b5cf6;
  --mw-data: #22d3ee;
  --mw-success: #22c55e;
  --mw-warning: #f59e0b;
  --mw-error: #ef4444;

  /* Tlumené varianty pro pozadí chipů a štítků. */
  --mw-cta-soft: rgba(255, 38, 117, 0.12);
  --mw-nav-soft: rgba(37, 99, 235, 0.14);
  --mw-ai-soft: rgba(139, 92, 246, 0.14);
  --mw-data-soft: rgba(34, 211, 238, 0.12);
  --mw-success-soft: rgba(34, 197, 94, 0.13);
  --mw-warning-soft: rgba(245, 158, 11, 0.13);
  --mw-error-soft: rgba(239, 68, 68, 0.13);

  /* Fokus musí být vidět na tmavém i na magenta podkladu. */
  --mw-focus: #7dd3fc;

  /* ---- Typografie ---------------------------------------------------- */
  /* Inter jako první volba, ale bez externího requestu — když ho návštěvník
     nemá, spadne to na systémový font. Blueprint tuhle variantu připouští
     a šetří to LCP. */
  --mw-font: "Inter var", Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif;
  --mw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluidní škála: clamp místo desítek breakpointů.
     Mobil drží spodní mez z blueprintu, desktop horní. */
  --mw-fs-h1: clamp(2.5rem, 1.6rem + 3.9vw, 4.875rem); /* 40 → 78 px */
  --mw-fs-h2: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem); /* 30 → 52 px */
  --mw-fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem); /* 22 → 30 px */
  --mw-fs-lead: clamp(1.125rem, 1.03rem + 0.4vw, 1.5rem); /* 18 → 24 px */
  --mw-fs-body: clamp(1rem, 0.96rem + 0.19vw, 1.1875rem); /* 16 → 19 px */
  --mw-fs-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem); /* 13 → 15 px */
  --mw-fs-eyebrow: 0.8125rem;

  --mw-lh-h1: 1.02;
  --mw-lh-h2: 1.08;
  --mw-lh-h3: 1.2;
  --mw-lh-body: 1.62;
  --mw-fw-h1: 780;
  --mw-fw-h2: 720;
  --mw-fw-med: 560;
  --mw-fw-normal: 400;
  --mw-ls-tight: -0.022em;

  /* Délka řádku: běžný text 58–72 znaků, hero perex do 700 px. */
  --mw-measure: 66ch;
  --mw-measure-lead: 43rem;

  /* ---- Layout -------------------------------------------------------- */
  --mw-container: 1360px;
  --mw-container-wide: 1480px;
  --mw-gutter: 24px;
  --mw-grid-gap: 26px;

  --mw-section-lg: clamp(72px, 8vw, 148px);
  --mw-section-md: clamp(56px, 6vw, 104px);
  --mw-card-pad: clamp(20px, 2.2vw, 32px);

  /* ---- Poloměry a rámečky -------------------------------------------- */
  --mw-radius-panel: 26px;
  --mw-radius-card: 20px;
  --mw-radius-btn: 12px;
  --mw-radius-pill: 999px;
  --mw-radius-sm: 10px;
  --mw-border-w: 1px;

  /* ---- Stíny --------------------------------------------------------- */
  /* Oddělení nesou hlavně povrch a rámeček; stín je jemný.
     Screenshot smí mít výraznější měkký stín. */
  --mw-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
  --mw-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.38);
  --mw-shadow-shot: 0 30px 80px rgba(0, 0, 0, 0.55);
  --mw-shadow-header: 0 8px 28px rgba(0, 0, 0, 0.4);

  /* ---- Rozměry komponent --------------------------------------------- */
  --mw-btn-h: 50px;
  --mw-btn-h-sm: 42px;
  --mw-input-h: 52px;
  --mw-tap: 48px; /* minimální touch target */
  --mw-header-h: 82px;
  --mw-header-h-scrolled: 70px;

  /* ---- Pohyb --------------------------------------------------------- */
  --mw-motion-fast: 180ms;
  --mw-motion: 280ms;
  --mw-motion-slow: 450ms;
  --mw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mw-reveal-shift: 14px;

  /* ---- Vrstvení ------------------------------------------------------ */
  --mw-z-header: 100;
  --mw-z-megamenu: 110;
  --mw-z-sticky-cta: 120;
  --mw-z-modal: 200;
}

/* Blueprint: při reduce vypnout parallax, dopočet čísel a scroll transition.
   Obsah musí zůstat plně srozumitelný — proto se ruší jen pohyb, nic se
   neskrývá. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mw-motion-fast: 0ms;
    --mw-motion: 0ms;
    --mw-motion-slow: 0ms;
    --mw-reveal-shift: 0px;
  }
}