/* ==========================================================================
   tokens.css
   Jediné místo, kde žijí barvy, písma, velikosti, mezery a časování.

   Pravidlo projektu: nikde jinde v CSS nesmí být napsaná konkrétní barva,
   název písma ani poloměr zaoblení. Vždy se sáhne sem přes var().

   Vzhled zrcadlí referenční web: SVĚTLÝ základ (#fafafa), černý text,
   barva se objevuje jen jako malba kolem nadpisu v hero, v přechodových
   zvýrazněních slov a na tmavých vložených panelech (#151717).
   Hodnoty jsou převzaté z rozboru referenčního CSS, viz DESIGN.md.
   ========================================================================== */

:root {

    /* ---------------------------------------------------------- barvy: plochy */
    --bg:               #fafafa;   /* základ stránky, světlý */
    --surface:          #ffffff;   /* světlý vložený panel (sekce úvodu) */
    --panel-dark:       #151717;   /* tmavý vložený panel: práce, výzva, patička */
    --panel-dark-2:     #1d2022;   /* karty a pole uvnitř tmavého panelu */

    /* ------------------------------------------------------------ barvy: text */
    --ink:              #000000;   /* hlavní text na světlé */
    --ink-soft:         #151717;
    --text-on-dark:     #ffffff;

    /* Tlumené odstíny. Reference používá 50 % a 35 % černé, což ale
       nesplňuje kontrastní poměr 4.5:1 pro drobné písmo. Držíme stejný
       dojem, ale posunuté na hodnoty, které projdou.
         --muted    popisky sekcí a meta údaje  (~5:1)
         --muted-2  vedlejší text odstavců      (~7:1) */
    /* Nejhlubší černá pro smyčku značky na homepage (brand-loop).
       Tmavší než --panel-dark schválně: stuha v ní víc svítí. */
    --panel-void:       #060104;

    --muted:            rgba(0, 0, 0, .6);
    --muted-2:          rgba(0, 0, 0, .72);
    --muted-on-dark:    rgba(255, 255, 255, .6);
    --muted-2-on-dark:  rgba(255, 255, 255, .72);

    /* ---------------------------------------------------------- barvy: akcenty */
    --red:              #fe0048;   /* tečka v logu a u popisků, aktivní stavy */
    --pink:             #fe0168;   /* plochy, tečky, akcenty na tmavém */
    /* Sytá růžová je na světlém podkladu pro drobné písmo příliš světlá
       (3.9:1). Pro text na světlé ploše používáme tmavší odstín, který
       projde kontrastem 4.5:1, ale opticky zůstává stejnou barvou. */
    --pink-ink:         #d10052;
    --orange:           #fe802d;
    --purple:           #ac0bd9;
    --violet:           #bd06c4;
    --teal:             #23d5ab;
    --lime:             #c7fe00;   /* plovoucí kontaktní kolečko */
    --on-lime:          #000000;

    /* Přechod pro zvýrazněná slova v nadpisech (animovaný). */
    --gradient-text:    linear-gradient(45deg, var(--orange), var(--red), var(--purple), var(--teal));
    /* Značkový přechod pro plochy a linky. */
    --gradient-brand:   linear-gradient(60deg, var(--orange), var(--red), var(--purple));

    /* --------------------------------------------------------- barvy: linky */
    --border:           rgba(0, 63, 64, .1);      /* vlasové oddělovače na světlé */
    --border-strong:    rgba(0, 0, 0, .8);
    --border-on-dark:   rgba(255, 255, 255, .2);

    /* ------------------------------------------------- záře v tmavých panelech */
    /* Plné barvy, průhlednost řeší opacity .15 na prvku. */
    --oval-orange:      #fe6637;
    --oval-pink:        #fe0168;
    --oval-opacity:     .15;
    --oval-size:        120vw;

    /* --------------------------------------------- malba v hero (canvas i CSS) */
    /* Od 13. 10. 2026 červená místo růžovofialové (Filip). --paint-1 a 2
       jsou skvrny CSS malby, která běží, než se načte kouř (a na slabších
       zařízeních místo něj), --paint-3 je barva vodoznaku. */
    --paint-1:          var(--red);
    --paint-2:          #9e0030;   /* hluboká karmínová */
    --paint-3:          #ffffff;
    --paint-4:          #ffffff;
    /* Kouřová simulace (hero-fluid.js): barva kouře, barva tmavých šmouh,
       jejich nejvyšší krytí (ať černá neoslňuje) a síla jednoho šplouchnutí. */
    --smoke-color:      var(--red);
    --smoke-ink:        var(--panel-dark);
    --smoke-ink-max:    .75;
    --smoke-brightness: .15;

    /* --------------------------------------------------------------- stavy */
    --focus-ring:       var(--red);
    --success:          #46c63a;
    /* Chybové hlášky jsou drobné písmo, proto tmavší odstín (4.5:1). */
    --error:            #d10052;

    /* --------------------------------------------------------------- písmo */
    --font-display:     'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:        'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --weight-light:     300;
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;

    /* Šířková osa proměnného písma. Referenční Matter je přirozeně širší,
       proto nadpisy sázíme lehce rozšířené. */
    --width-normal:     100;
    --width-heading:    106;

    /* ------------------------------------------------------ velikosti písma */
    /* Převzato z reference: nadpisy jsou střídmé, dominuje bílý prostor. */
    --size-hero:        max(40px, 3.13vw);          /* hero nadpis */
    --size-display:     clamp(28px, 3.13vw, 63px);  /* velké nadpisy služeb; od ~2000 px už neroste, aby název služby na jednom řádku nedosáhl k obsahu vedle */
    --size-h2:          clamp(24px, 3vw, 50px);     /* nadpisy sekcí */
    --size-h2-cta:      clamp(24px, 3vw, 40px);     /* nadpis výzvy */
    --size-h3:          clamp(18px, 2.5vw, 30px);
    --size-h4:          clamp(20px, 1.4vw, 36px);
    --size-h5:          clamp(18px, 1.35vw, 26px);
    --size-text-35:     clamp(1.75rem, 1.25rem + 1vw, 2.5rem);  /* mezititulek úvodu */
    --size-accordion:   clamp(1rem, calc(1rem + .25vw), 1.25rem);
    /* Mezinadpis uvnitř delšího textu. Musí zůstat zřetelně pod --size-h3,
       kterým se sázejí nadpisy sekcí, jinak spolu obě úrovně soupeří. */
    --size-subhead:     clamp(1.15rem, calc(1rem + .35vw), 1.375rem);
    --size-body:        clamp(.9rem, .85rem + .2vw, 1rem);
    --size-small:       .9rem;
    --size-link-touch:  1rem;                        /* odkazy pod sebou na telefonu (patička) */
    --size-label:       16px;                        /* popisek sekce */
    --size-xs:          .75rem;

    --leading-body:     1.5;
    --leading-relaxed:  1.8;

    --tracking-heading: -.05em;
    --tracking-sub:     -.03em;

    /* --------------------------------------------------------------- mezery */
    --space-1:          .25rem;
    --space-2:          .5rem;
    --space-3:          .75rem;
    --space-4:          1rem;
    --space-5:          1.5rem;
    --space-6:          2rem;
    --space-7:          2.5rem;
    --space-8:          3rem;
    --space-9:          4rem;
    --space-10:         5rem;
    --space-11:         6rem;
    --space-12:         8rem;

    /* Svislý rytmus sekcí, převzatý z reference. */
    --section-pad:      calc(6rem + 6vh);
    --section-pad-m:    4rem;
    --layout-sm:        calc(var(--section-pad) * .5);
    --layout-xs:        calc(var(--section-pad) * .35);

    /* ------------------------------------------------------------- zaoblení */
    --radius-btn:       .5rem;
    --radius-media:     .75rem;
    --radius-panel:     1rem;
    --radius-card:      1.5rem;
    --radius-pill:      999px;

    /* Odsazení tmavého panelu od kraje okna. */
    --panel-inset:      15px;

    /* ---------------------------------------------------------------- šířky */
    --container-max:    1799px;
    /* Okraj okna. Na širokých obrazovkách roste, viz konec souboru:
       obsah nemá lepit na kraj, reference drží znatelný okraj po stranách. */
    --container-pad:    1.5rem;
    --measure:          46rem;
    /* Šířka pro formuláře. Snesou víc než čtený text, ale ne celý kontejner. */
    --measure-form:     1400px;
    /* Plovoucí kolečko "Napište nám" (layout.css). Podle něj si patička
       nechává volné místo, aby kolečko nezakrylo poslední odkaz. */
    --speak-size:       5rem;
    --speak-size-sm:    3rem;

    /* Loga klientů pod hero (components.css, .clients). Všechna mají
       stejnou výšku a jsou přitlumená, aby nesoupeřila s nadpisem.
       --clients-max je šířka pásu na velkých oknech, --clients-loop doba,
       za kterou pás ujede jednu sadu log. */
    --client-logo-h:       2.5rem;
    --client-logo-h-sm:    2rem;
    --client-logo-opacity: .55;
    --clients-max:         64rem;
    --clients-loop:        60s;

    /* --------------------------------------------------------- pohyb a čas */
    --dur-fast:         .2s;
    --dur-med:          .45s;
    --dur-slow:         .8s;

    --ease-out:         cubic-bezier(.215, .61, .355, 1);
    --ease-out-soft:    cubic-bezier(.25, .46, .45, .94);
    --ease-back:        cubic-bezier(.175, .885, .32, 1.275);

    /* -------------------------------------------------------------- vrstvy */
    --z-base:           1;
    --z-content:        20;
    --z-gravity:        121;
    --z-overlay:        450;
    --z-header:         500;
    --z-cursor:         9999;

    /* ------------------------------------------------------------- hlavička */
    --header-height:    clamp(72px, 5vw + 40px, 114px);
    --header-height-scrolled: clamp(64px, 4vw + 34px, 86px);

    /* ------------------------------------------------------ vlastní kurzor */
    /* Bílá + mix-blend exclusion: na světlé ploše se jeví černý,
       na tmavém panelu bílý. Stejný trik jako reference. */
    --cursor-color:     #ffffff;

    /* ------------------------------------------------------------- ostatní */
    --card-ratio:       98%;
    --backdrop-blur:    30px;
    --shadow-card:      0 .25rem 3.5rem 0 rgba(0, 0, 0, .1);
    --scrim:            rgba(0, 0, 0, .2);
}

/* Uživatelé s vypnutými animacemi dostanou statický web. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: .01ms;
        --dur-med:  .01ms;
        --dur-slow: .01ms;
    }
}

/* Okraje okna rostou se šířkou obrazovky.
   Na velkém monitoru je 1.5rem málo, obsah pak lepí na kraj. */
@media (min-width: 62rem) {
    :root { --container-pad: 2.5rem; }
}

@media (min-width: 100rem) {
    :root { --container-pad: 4rem; }
}