/* ============ EENS V2 · tokeny ============
   Vlastná dizajnová vrstva verejnej stránky. Zámerne NEDEDÍ z
   apps/assets/eens.css: aplikácie majú svoj svetlý priemyselný vzhľad a ten
   ostáva nedotknutý. Spoločná je len značka a červená.

   Smer: výstavná sieň (tmavé inštalačné pásy) striedaná s teplým papierom
   (pokojné čítacie pásy). Kresba je jediná ozdoba, fotky sa nepoužívajú.
   Modrá v palete nie je vôbec, ani v odkazoch, ani vo focus rámčekoch. */

:root{
  /* Stránka si striedanie svetla a tmy rieši sama, preto to musí povedať
     nahlas. Android Chrome má funkciu Auto Dark Theme: keď stránka o sebe
     nič nedeklaruje, prehliadač jej sám preráta farby, aby vyšli na tmavý
     podklad. Na tmavom hero páse to červenú #d2051e zosvetlilo do ružova
     a značka prestala byť značkou. Deklarácia „viem oboje" tú funkciu
     vypne. V HTML je k tomu ešte <meta name="color-scheme">, lebo ten
     prehliadač pozná skôr, než stiahne tento súbor. */
  color-scheme:light dark;

  /* ---- tmavé plochy, inštalačné pásy ---- */
  --uhol:#141010;            /* najhlbšia plocha, hero */
  --uhol-2:#1d1817;          /* vnorená plocha v tme */
  --uhol-3:#272020;          /* karta v tme */
  --linka-tma:#3a2f2d;
  --linka-tma-silna:#544442;

  /* ---- svetlé plochy, čítacie pásy ---- */
  --papier:#f4f1ed;          /* stránka */
  --papier-2:#ebe6e0;        /* vnorená plocha */
  --papier-3:#ffffff;        /* karta */
  --linka:#ded7cf;
  --linka-silna:#c6bcb2;

  /* ---- značka ---- */
  --cervena:#d2051e;         /* jediný krik, zhodná s aplikáciami */
  --cervena-tmava:#a30217;
  --cervena-ziara:rgba(210,5,30,.32);
  --bordo:#7a0a18;           /* hlbší tón, prechody */
  --med:#b4703f;             /* meď, materiál remesla, druhý akcent */
  --med-svetla:#d99a68;
  --med-tlmena:rgba(180,112,63,.22);

  /* ---- text ----
     Na stránke sú tri farby písma a nič medzi nimi: čierna na svetlom,
     biela na tmavom a červená ako akcent. Sivá je vyhradená VÝHRADNE pre
     zamknuté časti, tam nesie význam „toto zatiaľ neplatí".

     Odstupňovaná sivá tu bola predtým a robila drobné popisky aj koľajnicu
     ťažko čitateľnými. Hierarchiu preto drží veľkosť a hrúbka písma, nie
     bledosť. Tokeny --text-2 a --text-3 zostávajú, aby sa nemusel prepisovať
     každý súbor, ale ukazujú na tú istú farbu ako --text. */
  --text:#171211;            /* teplá čierna */
  --text-2:#171211;
  --text-3:#171211;
  --text-tma:#f3ece7;
  --text-tma-2:#f3ece7;
  --text-tma-3:#f3ece7;

  /* Jediná sivá na stránke. Používa ju len to, čo je zamknuté. */
  --sive:#8a7d77;
  --sive-tma:#9b8c85;

  /* ---- písmo ----
     Nadpisy stoja na grotesku s tesným prestrkom. Technické popisky idú
     v strojopise, ten drží stránku v remesle a nie v marketingu.
     [DOPLNIŤ: finálny licencovaný font pre nadpisy, potom stačí zmeniť tento
     jeden riadok a podsetnúť ho cez nastroje/subset-fontov.py] */
  --pismo-nadpis:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,
                 "Segoe UI",Roboto,Arial,sans-serif;
  --pismo-telo:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
               Helvetica,Arial,sans-serif;
  --pismo-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- veľkosti ---- */
  /* Display sadzba musí zmestiť tri riadky aj do okna vysokého 720 px,
     inak sa claim a tlačidlá ocitnú pod hranou. */
  --v-display:clamp(46px,9.4vw,152px);
  --v-h1:clamp(38px,6.2vw,80px);
  --v-h2:clamp(27px,3.9vw,50px);
  --v-h3:clamp(19px,2.2vw,26px);
  --v-telo:clamp(16px,1.05vw,17.5px);
  --v-drobne:13.5px;
  --v-stitok:11px;

  /* ---- priestor ----
     Vzdušnosť je polovica dojmu, ale odkedy má každá činnosť vlastnú krátku
     stránku, nie je čo prevzdušňovať: pás vysoký ako pol obrazovky znamenal,
     že na krátkej stránke bolo vidieť viac prázdna než obsahu. */
  --pas:clamp(58px,7vw,104px);
  --pas-maly:clamp(38px,4.4vw,62px);
  --obal:min(1320px,100% - clamp(32px,6vw,112px));

  /* ---- rám a tieň ---- */
  --r:2px;                   /* takmer ostrý roh, kresliarsky, nie appkový */
  --r-velky:4px;
  --tien:0 1px 2px rgba(23,18,17,.05),0 18px 44px rgba(23,18,17,.08);
  --tien-zdvih:0 2px 4px rgba(23,18,17,.06),0 30px 70px rgba(23,18,17,.14);

  /* ---- pohyb ----
     Jedna krivka na celú stránku. Rýchle veci 180 ms, plochy 420 ms,
     scénické veci 760 ms. Nič medzi tým. */
  --krivka:cubic-bezier(.22,.61,.36,1);
  --krivka-tvrda:cubic-bezier(.65,0,.35,1);
  --cas-rychly:.18s;
  --cas:.42s;
  --cas-scena:.76s;

  /* ---- ľavá koľajnica ----
     Musí uniesť najdlhší názov pása, teda „Inžiniering". Pod 132 px sa
     popis oreže na tri bodky. */
  --ras:clamp(132px,12.5vw,196px);
  --lista-v:66px;
}

/* Tmavý pás. Prepína iba plochy a text, značkové farby ostávajú.
   Sekcia si triedu nesie sama, globálny prepínač témy verejná stránka nemá:
   striedanie svetla a tmy je tu rytmus rozloženia, nie voľba návštevníka. */
.tmavy{
  --papier:var(--uhol);
  --papier-2:var(--uhol-2);
  --papier-3:var(--uhol-3);
  --linka:var(--linka-tma);
  --linka-silna:var(--linka-tma-silna);
  --text:var(--text-tma);
  --text-2:var(--text-tma-2);
  --text-3:var(--text-tma-3);
  --tien:0 1px 2px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.42);
  --tien-zdvih:0 2px 4px rgba(0,0,0,.55),0 30px 70px rgba(0,0,0,.5);
  color-scheme:dark;
}