/* ==========================================================================
   tokens.css – designove promenne
   --------------------------------------------------------------------------
   Barvy jsou odectene primo z originalnich tiskovych podkladu (vzorkovani
   pixelu), nikoliv odhadnute:

     #01ACF1  hlavni modra   – text "FAJN", ramecky a ilustrace ve vsech letacich
     #4BB2F4  modra loga     – vypln pismen loga FAJN AS
     #001946  tmava modra    – obrys loga
     #ABE0FF  svetla modra   – svetla mista v logu
     #C1E2F5  jemna modra    – rastr pozadi letaku
     #FE0000  cervena        – napis "Pojdte volit"
     #FF4200  oranzova       – napis "PRAHA" na letaku s autobusem
     #315A74  modrosedá      – saka postav v ilustracich
   ========================================================================== */

:root {
  /* --- znackove barvy ------------------------------------------------- */
  --c-blue: #01acf1;
  --c-blue-logo: #4bb2f4;
  --c-navy: #001946;
  --c-sky: #abe0ff;
  --c-sky-soft: #c1e2f5;
  --c-red: #fe0000;
  --c-orange: #ff4200;
  --c-slate: #315a74;

  /* --- odvozene odstiny ----------------------------------------------- */
  --c-blue-dark: #0089c2;
  --c-blue-deep: #00567c;
  --c-navy-soft: #0b2a5e;
  --c-tint: #eef8fe;
  --c-tint-2: #dcf0fc;

  /* --- neutralni ------------------------------------------------------- */
  --c-white: #ffffff;
  --c-paper: #f7fbfd;
  --c-line: #d8e9f4;
  --c-line-strong: #b5d9ec;
  --c-text: #10283c;
  --c-text-soft: #4a6478;
  --c-text-mute: #7d94a5;

  /* --- typografie ------------------------------------------------------ */
  --font-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(2.4rem, 1.1rem + 4.6vw, 5rem);
  --fs-h2: clamp(1.85rem, 1.2rem + 2.2vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  --fs-lead: clamp(1.03rem, 0.97rem + 0.32vw, 1.22rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.78rem;

  /* --- rozmery --------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 860px;
  --header-h: 76px;
  --topbar-h: 38px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sp-section: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* --- stiny ----------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(0, 25, 70, 0.06), 0 2px 8px rgba(0, 25, 70, 0.05);
  --sh-md: 0 4px 14px rgba(0, 25, 70, 0.08), 0 12px 30px rgba(0, 25, 70, 0.07);
  --sh-lg: 0 10px 30px rgba(0, 25, 70, 0.1), 0 30px 60px rgba(0, 25, 70, 0.09);
  --sh-blue: 0 8px 22px rgba(1, 172, 241, 0.28);
  --sh-red: 0 8px 22px rgba(254, 0, 0, 0.22);

  --ease: cubic-bezier(0.22, 0.68, 0.35, 1);
  /* expo-out – rychly nastup, velmi mekke dojezdy; pouziva se u odkryvani
     obsahu pri scrollovani, kde tvrde dobrzdeni pusobi trhane */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}