/* DESIGN TOKENY
   ==================================================================
   Toto je jediné miesto, kde sa menia farby, písma, stupne textu
   a rozostupy. Ak chceš prekopať vzhľad webu, rob to tu — nie
   v styles.css. Pravidlo: v styles.css nesmie byť zapísaná konkrétna
   farba ani konkrétna veľkosť v pixeloch, vždy len odkaz na premennú
   odtiaľto. Vďaka tomu sa dá celý web preladiť za pár minút.

   ------------------------------------------------------------------
   DIZAJNOVÝ SMER — prečítaj si to, kým začneš meniť farby
   ------------------------------------------------------------------
   Od 21. 10. 2026 web hovorí vizuálnou rečou KC Digital (Landing_page/
   websupport-verzia). Služba je produkt KC Digital a má tak aj vyzerať.

   · Monochróm: atrament (#0A0A0A) a papier (#FFFFFF). Žiadna ďalšia
     chromatická farba. Odtiene šedej sú len priehľadnosti atramentu
     prepočítané na plné farby (kvôli overeniu kontrastu).
   · Jedno písmo: Archivo. Nadpisy v reze 800 so stiahnutým prestrkom,
     popisky (očká, údaje) verzálkami v reze 700 s veľkým prestrkom.
   · Plochy sú prevažne svetlé a delia ich vlasové linky. Tmavá je len
     sekcia Ukážka (nesie prehliadku) a pätka.
   · Karty sú mriežka s 1px medzerou — linka medzi nimi je podklad
     mriežky, nie rámik okolo karty.
   · Tlačidlá majú 2px rám a pri prejdení myšou sa farebne prevrátia.
   · Žiadne zaoblenia ani tiene. `--radius` je nula.
   · Zárubňa (otvor v pomere dverí v hero a vstup do ukážky) zostáva —
     je to vizuál produktu, nie farebná ozdoba. */

:root {
  /* ---- FARBY ----------------------------------------------------
     Atrament a papier ako v KC Digital. Medzistupne zodpovedajú
     priehľadnostiam z KC webu (ink/60, ink/25, ink/10…), prepočítané
     na plné farby, aby sa dal zmerať kontrast. */
  --ink: #0a0a0a;        /* atrament — text a tmavé plochy */
  --ink-800: #161616;    /* vyvýšená plocha na tmavom */
  --ink-700: #262626;    /* linky na tmavom (paper/10) */
  --ink-600: #3d3d3d;    /* silnejšia linka na tmavom (paper/20) */
  --ink-500: #6b6b6b;    /* rám poľa na tmavom — 3,7 : 1 */

  --paper: #ffffff;      /* papier — svetlé plochy */
  --paper-200: #f5f5f5;  /* vyvýšená plocha na svetlom */
  --paper-300: #e7e7e7;  /* vlasové linky na svetlom (ink/10) */
  --paper-400: #cecece;  /* silnejšia linka, rám obrysového tlačidla (ink/20) */
  --paper-500: #8c8c8c;  /* rám poľa formulára — 3,4 : 1, WCAG 1.4.11 */

  /* Text */
  --text-tmavy: #0a0a0a;         /* na svetlom podklade */
  --text-tmavy-tichy: #666666;   /* ink/60 — druhoradý text, 5,7 : 1 */
  --text-svetly: #ffffff;        /* na tmavom podklade */
  --text-svetly-tichy: #9d9d9d;  /* paper/60 — 7,6 : 1 na atramente */

  /* Veľké poradové čísla (01, 02…). Na KC webe sú v ink/25, tu sú
     tmavšie: aj keď sú `aria-hidden`, Lighthouse ich počíta do
     kontrastu a pri ink/25 (1,83 : 1) zrazil prístupnosť na 96.
     Toto je hranica pre veľký text, 3 : 1. */
  --cislo-svetle: #8c8c8c;       /* 3,36 : 1 na papieri */
  --cislo-tmave: #6b6b6b;        /* 3,72 : 1 na atramente */

  /* Semantické aliasy. Komponenty používajú TIETO, nie farby vyššie —
     vďaka tomu sa dá prepnúť plocha (svetlá/tmavá) jedným zásahom,
     pozri zoznam tmavých plôch na konci súboru. */
  --plocha: var(--paper);
  --plocha-vyvysena: var(--paper-200);
  --linka: var(--paper-300);
  --linka-silna: var(--paper-400);
  --ram-pola: var(--paper-500);
  --text: var(--text-tmavy);
  --text-tichy: var(--text-tmavy-tichy);
  --cislo: var(--cislo-svetle);
  --akcent: var(--ink);
  --akcent-hover: var(--ink);

  /* ---- PÍSMO ----------------------------------------------------
     Jedno písmo ako v KC Digital. Archivo je variabilné (400–800). */
  --pismo-text: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --pismo-display: var(--pismo-text);
  --pismo-popis: var(--pismo-text);

  --vaha-nadpis: 800;
  --vaha-popis: 700;

  /* ---- STUPNICA TEXTU -------------------------------------------
     Mobile-first cez clamp(): prvá hodnota je mobil, tretia desktop. */
  --text-2xs: 0.6875rem;                           /* 11px — očká (KC eyebrow) */
  --text-xs: 0.75rem;                              /* 12px — popisky */
  --text-sm: 0.875rem;                             /* 14px — pätka, poznámky */
  --text-base: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);       /* 15–16px */
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);        /* 17–18px — úvodný odstavec */
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);       /* 18–20px — nadpis karty */
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);        /* 24–34px */
  --text-2xl: clamp(1.875rem, 1.2rem + 3vw, 3rem);            /* 30–48px — nadpis sekcie */
  --text-3xl: clamp(2.25rem, 1.2rem + 4.8vw, 4.5rem);         /* 36–72px — hero */

  --vyska-riadku-tesna: 1.02;   /* hero */
  --vyska-riadku-nadpis: 1.08;
  --vyska-riadku-text: 1.625;

  --prestrk-display: -0.025em;  /* nadpisy v reze 800 — tracking-tight */
  --prestrk-popis: 0.18em;      /* popisky verzálkami */
  --prestrk-ocko: 0.28em;       /* očko nad nadpisom */
  --prestrk-znacka: 0.18em;     /* názov značky v hlavičke */

  --miera: 68ch;
  --miera-uzka: 52ch;

  /* ---- ROZOSTUPY ------------------------------------------------
     Stupnica 4px. */
  --p-1: 0.25rem;
  --p-2: 0.5rem;
  --p-3: 0.75rem;
  --p-4: 1rem;
  --p-6: 1.5rem;
  --p-8: 2rem;
  --p-10: 2.5rem;
  --p-12: 3rem;
  --p-14: 3.5rem;
  --p-16: 4rem;
  --p-24: 6rem;

  /* Vertikálny rytmus sekcií — KC: py-20 / md:py-28. */
  /* Výška lepkavej hlavičky — sekcie „na jednu obrazovku" ju odpočítajú. */
  --vyska-hlavicky: 4.0625rem;   /* 65 px, namerané 22. 10. pri 1440 px */
  --sekcia-y: clamp(5rem, 3.5rem + 4vw, 7rem);

  /* ---- MRIEŽKA A ŠÍRKY -----------------------------------------*/
  --sirka-obsah: 72rem;    /* KC max-w-6xl */
  --sirka-uzka: 48rem;
  --sirka-hero: 86rem;     /* hero s videom ukážky — širšie než text webu */
  --okraj: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);  /* KC px-5 / sm:px-8 */

  /* ---- ZÁRUBŇA -------------------------------------------------*/
  --zarubna-pomer: 90 / 197;

  /* ---- DETAILY --------------------------------------------------*/
  --radius: 0;
  --vlasova: 1px;
  --ram: 2px;              /* rám tlačidiel a polí formulára */
  --prechod: 200ms ease;
  --prechod-pomaly: 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Prepnutie plochy na tmavú.
   Komponenty vnútri nevedia nič o farbách — prepíšeme len sémantické
   aliasy a tlačidlá, linky, ikony aj text sa preladia samy.

   POZOR: keď pridávaš ďalšiu tmavú plochu, pridaj ju do tohto
   zoznamu. Nestačí dať prvku tmavé pozadie — bez prepnutia aliasov
   zmiznú na nej odkazy, linky aj obrysové tlačidlá. */
.sekcia--tien,
.scenar__stlpec--s,
.porovnanie__my,
.ponuka,
.patka {
  --plocha: var(--ink);
  --plocha-vyvysena: var(--ink-800);
  --linka: var(--ink-700);
  --linka-silna: var(--ink-600);
  --ram-pola: var(--ink-500);
  --text: var(--text-svetly);
  --text-tichy: var(--text-svetly-tichy);
  --cislo: var(--cislo-tmave);
  --akcent: var(--paper);
  --akcent-hover: var(--paper);
}