/* ============================================================
   DAYTIME — společný základ denního registru značky
   Používají: redesign.html · vop.html · smlouva.html
   Specifikace a pravidla: DESIGN-DAYTIME.md
   Kontrola souladu:      python3 tools/check-design.py
   ------------------------------------------------------------
   Tento soubor je JEDINÝ zdroj pravdy pro tokeny a základní
   primitiva. Nikdy nekopírovat :root do stránky — stránka smí
   definovat jen vlastní komponenty.
   ============================================================ */

:root{
  /* ---------- barvy ---------- */
  --ink:#0e0e10;          /* hlavní text, tmavé plochy */
  --ink-dim:#5c5c62;      /* sekundární text (7.1:1 na paper) */
  --ink-faint:#6c6c75;    /* tiché popisky — 5,2:1 na paper, 4,8 na cloud,
                             4,5 na cloud2. Projde AA na VŠECH podkladech.
                             Dřív #8a8a92 s komentářem „4,6:1" — ta hodnota
                             byla nesprávná, dávala 3,4:1 a padala všude. */
  --paper:#ffffff;        /* pozadí stránky */
  --cloud:#f6f6f7;        /* jemné plochy, pruhy sekcí */
  --cloud2:#efeff1;       /* vnitřní linky v plochách */
  --fill:#e4e4e9;         /* neutrální výplň (úsečky, pruhy) */
  --line:#e6e6ea;         /* ohraničení */
  --rule:#c9c9d0;         /* silnější linka v dokumentech */
  --lime:#d7fb44;         /* akcent značky */
  --lime-ink:#0c0e02;     /* text na lime */
  --lime-deep:#5f7414;    /* lime jako text na světlém (4.9:1) */
  --red:#d0453b;
  --green:#2b8a4e;
  --shade:#000;           /* jen pro masky a překryvy, nikdy text */

  /* tmavé plochy (patička, tmavé karty) a text na nich */
  --surf-dark:#1b1b1f;
  --surf-dark2:#26262b;
  --on-dark:#c9c9cf;
  --on-dark-dim:#8a8a92;
  --red-soft:#ff9d95;      /* červená čitelná na tmavém */

  /* upozornění na návrh (vop.html, smlouva.html) */
  --warn-bg:#fff6f5;
  --warn-line:#f3d6d3;
  --warn-ink:#7d2a23;

  /* nevyplněné pole v šabloně dokumentu */
  --ph-bg:#fff4d6;
  --ph-line:#d9a520;
  --ph-ink:#7a5a06;

  /* lime podložky — nikdy ne jako velká plocha, jen zvýraznění */
  --lime-wash:#fafdeb;
  --lime-tint:#eaf7d5;

  /* ---------- písmo ---------- */
  --fd:'Unbounded',system-ui,sans-serif;                 /* display */
  --fb:'Onest',system-ui,sans-serif;                     /* body */
  --fm:'JetBrains Mono',ui-monospace,monospace;          /* data */

  /* ---------- typografická škála ----------
     12 stupňů. Nový stupeň se nepřidává — pokud hodnota nesedí,
     komponenta se přiblíží k nejbližšímu stupni.                     */
  --t-display:clamp(76px,14vw,150px);   /* jedno obří číslo na sekci */
  --t-hero:clamp(2.4rem,6.4vw,5rem);    /* h1 a číselník v hero */
  --t-h2:clamp(1.7rem,3.8vw,3rem);      /* nadpis sekce */
  --t-num:clamp(26px,3.6vw,44px);       /* velké datové číslo */
  --t-h3:clamp(20px,2.4vw,28px);        /* podsekce */
  --t-h4:clamp(17px,2.1vw,22px);        /* název karty */
  --t-lead:clamp(16px,1.9vw,19px);      /* úvodní odstavec */
  --t-body:clamp(15px,1.75vw,17px);     /* běžný text */
  --t-ui:15px;                          /* tlačítka, vstupy, popisky UI */
  --t-sm:14px;                          /* druhotný text, popisky */
  --t-xs:13px;                          /* poznámky, zdroje */
  --t-meta:12px;                        /* mono metadata */
  --t-micro:11px;                       /* mono popisky uppercase */

  /* ---------- rozestupy ---------- */
  --g-xs:clamp(8px,1.2vw,14px);
  --g-s:clamp(14px,2.2vw,22px);
  --g-m:clamp(20px,2.6vw,32px);
  --g-l:clamp(28px,4vw,56px);
  --pad-block:clamp(72px,10vw,132px);     /* svislý rytmus sekce */
  --pad-inline:clamp(22px,5vw,64px);
  --wrap:1120px;

  /* ---------- rádiusy ---------- */
  --r-xs:6px;      /* drobné značky, chips */
  --r-s:12px;      /* média, malé karty, vstupy */
  --r-m:16px;      /* karty, tabulky, dráhy */
  --r-l:20px;      /* velké karty */
  --r-xl:clamp(22px,2.6vw,32px);   /* celé sekce */
  --r-pill:999px;  /* tlačítka, odznaky */
  /* kruh = 50 % je povolený literál (avatary, tečky) */

  /* ---------- stíny ---------- */
  --sh-s:0 1px 2px rgba(14,14,16,.04),0 10px 26px rgba(14,14,16,.035);
  --sh-m:0 24px 60px -34px rgba(20,22,30,.24),0 6px 16px -10px rgba(20,22,30,.12);
  --sh-l:0 30px 60px -12px rgba(14,14,16,.22),0 0 0 1px rgba(14,14,16,.05);
  --sh-dark:0 10px 24px -8px rgba(14,14,16,.5);   /* pod tmavým tlačítkem */
  --ring:0 0 0 6px rgba(215,251,68,.32);          /* lime prstenec */
  --hairline:0 0 0 1px var(--line);               /* vlasová linka stínem */
  --shadow:var(--sh-m);                            /* zpětná kompatibilita */

  /* ---------- pohyb ---------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --d-fast:.18s;    /* hover, drobné stavy */
  --d-base:.32s;    /* přechody komponent */
  --d-slow:.7s;     /* reveal při scrollu */
  --d-xslow:.9s;    /* růst úseček, dlouhé sekvence */

  /* ---------- vrstvení ---------- */
  --z-base:1;
  --z-sticky:50;    /* sticky prvky uvnitř obsahu */
  --z-nav:100;      /* topbar */
  --z-overlay:110;  /* mobilní menu, dropdowny */
  --z-debug:120;    /* ladicí mřížka */
}

/* Breakpointy (v CSS nelze proměnnou v @media — držet tyto tři hodnoty):
   --bp-s  560px   telefon
   --bp-m  860px   skládání do sloupce
   --bp-l  1080px  úzký desktop                                          */

/* ============================================================
   RESET A ZÁKLAD
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--lime-ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-xs)}

/* ============================================================
   TYPOGRAFIE
   Zarovnání: VŠE VLEVO. Na střed jen sekce s třídou .center,
   a ta je vyhrazena pro hero a závěrečné CTA.
   ============================================================ */
h1,h2,h3,h4{text-wrap:balance;letter-spacing:-.02em;font-family:var(--fd);font-weight:700}
p{text-wrap:pretty}

h1,.t-hero{font-size:var(--t-hero);font-weight:800;line-height:1.01;letter-spacing:-.02em}
h2,.t-h2  {font-size:var(--t-h2);line-height:1.08}
h3,.t-h3  {font-size:var(--t-h3);line-height:1.15;letter-spacing:-.015em}
h4,.t-h4  {font-size:var(--t-h4);line-height:1.2;letter-spacing:-.01em}

/* lime podtržení slova v nadpisu.
   Není výchozí — zapíná se třídou .hl na nadpisu. Na stránku nejvýše dvě:
   hero a jedno klíčové místo. h1 má podtržení vždy, je jen jeden. */
h1 em,h2 em,h3 em{font-style:normal}
h1 em,h2.hl em,h3.hl em{position:relative;white-space:nowrap;z-index:0}
h1 em::after,h2.hl em::after,h3.hl em::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em;
  height:.30em;background:var(--lime);z-index:-1;
}

.lead{color:var(--ink-dim);font-size:var(--t-lead);line-height:1.55;max-width:60ch;margin-top:18px}
.mono{font-family:var(--fm)}
.micro{font-family:var(--fm);font-weight:500;font-size:var(--t-micro);
       letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.note{font-size:var(--t-sm);line-height:1.6;color:var(--ink-faint);max-width:76ch}

/* Míra řádku — próza nikdy přes celou šířku.
   Povolené hodnoty: 44ch (úzká), 60ch (lead), 76ch (poznámka). */
.measure-s{max-width:44ch}
.measure-m{max-width:60ch}
.measure-l{max-width:76ch}

/* ============================================================
   ROZVRŽENÍ
   ============================================================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad-inline)}
section{position:relative}
.block{padding-block:var(--pad-block)}
/* залitá plocha sama o sobě odděluje sekci — vlasová linka je navíc */
.tint{background:var(--cloud)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ============================================================
   TLAČÍTKA — jedna základna, čtyři varianty. Nic dalšího.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fb);font-weight:600;font-size:15px;line-height:1;
  padding:15px 26px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  cursor:pointer;text-align:center;
  transition:transform var(--d-fast) var(--ease),
             box-shadow var(--d-fast) var(--ease),
             background var(--d-fast) var(--ease),
             border-color var(--d-fast) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn.primary{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);font-weight:700}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:var(--sh-dark)}
.btn.ghost{background:none}
.btn.link{border:none;background:none;color:var(--ink-dim);padding-inline:6px}
.btn.link:hover{color:var(--ink);transform:none;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   REVEAL PŘI SCROLLU
   Obsah nikdy nesmí být podmíněn JS — proto html.js.
   ============================================================ */
html.js .reveal{opacity:0;transform:translateY(26px)}
html.js .reveal.in{opacity:1;transform:none;
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  html.js .reveal{opacity:1;transform:none}
}

/* ============================================================
   POMOCNÉ
   ============================================================ */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}