:root {
  --primary-color: #764df0;
  --primary-color-rgb: 118, 77, 240;
  --secondary-color: #442490;
  --secondary-color-rgb: 68, 36, 144;

  --color-surface: #ffffff;
  --color-surface-soft: #f4f0fa;
  --color-surface-accent: #f6f1fc;
  --color-text: #101435;
  --color-text-strong: #1a1040;
  --color-text-muted: #5c5672;

  /* Škála odsadení. Mriežka 4 px; každý stupeň je násobkom štyroch, bez výnimiek.
     Stupne, ktoré nesú konštrukčný význam, sú označené.

     Škála je predpis, nie popis. Vlastné štýly webu sú dnes na dvojpixelovom
     pravítku: z celočíselných hodnôt odsadenia je 98,8 % párnych, ale iba 54,5 %
     deliteľných štyrmi a 44,3 % leží presne dva pixely vedľa. Mriežka 4 px je
     vedomé pritiahnutie toho zvyku, nie jeho opis.

     Dva dôsledky pravidla o násobkoch štyroch, oba zámerné:
       - Nie je stupeň 2 px. Kód, ktorý naozaj potrebuje vlásočnicový posun,
         napíše 2px a je vidieť, že ide o výnimku.
       - Nie je stupeň 10 px, ani 15 / 25 / 30 / 50 / 70 / 90. To je desaťpixelové
         pravítko starej témy. 10 px je najpoužívanejšia hodnota odsadenia na webe
         (96 výskytov v našich súboroch), takže jeho vypustenie je najväčšia vec,
         ktorú táto škála od niekoho žiada. Nový kód berie 8 px alebo 12 px,
         existujúce desiatky ostávajú.

     Škála vynecháva štyri z najpoužívanejších hodnôt — 22, 10, 14 a 18 px, spolu
     367 výskytov, teda 28,7 % deklarácií. Ani jedna nie je násobkom štyroch. To je
     cena a platí ju len kód napísaný po tomto commite.

     Bootstrap zosúlaďujeme, nenahrádzame. Stupne $spacer sú v tomto builde 4, 8,
     16, 24 a 48 px a všetkých päť je stupňom škály. Jediný nesúlad — --space-2xl
     28 px proti upravenej medzere .g-4, ktorá je 28,8 px — ostáva: zavrieť ho
     znamená zasiahnuť do minifikovaného cudzieho súboru alebo posunúť 252 riadkov
     mriežky o 4,8 px. Ten zásah do Bootstrapu je zapísaný v DESIGN_AUDIT.md,
     zistenie 11, aby sa naň pri ďalšom povýšení Bootstrapu nezabudlo.

     Hranica prijatia je v CSS_ARCHITECTURE.md. */
  --space-2xs: 4px;    /* Bootstrap .m-1 / .p-1 / .g-1 */
  --space-xs: 8px;     /* Bootstrap .m-2 / .p-2 / .g-2 */
  --space-sm: 12px;    /* medzera .container */
  --space-md: 16px;    /* Bootstrap .m-3 / .p-3 / .g-3 */
  --space-lg: 20px;
  --space-xl: 24px;    /* Bootstrap .m-4 / .p-4 / .g-lg-4 */
  --space-2xl: 28px;   /* blízko upravenej medzery .g-4, ktorá je 28,8 px */
  --space-3xl: 32px;
  --space-4xl: 40px;   /* odsadenie sekcie do 767 px, css/style.css:12919 */
  --space-5xl: 48px;   /* Bootstrap .m-5 / .p-5 / .g-5 */
  --space-6xl: 60px;   /* odsadenie sekcie do 1199 px, css/style.css:12672 */
  --space-7xl: 80px;   /* celoplošný fotopás, css/style.css:7700 */
  --space-8xl: 100px;  /* odsadenie sekcie, css/style.css:1257 */

  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}