/* ==========================================================================
   TOKENS.CSS
   Jediné miesto, kde sa definujú farby, písma a rozostupy.
   Ak chceš zmeniť vzhľad celej platformy, meň hodnoty TU, nie v komponentoch.
   ========================================================================== */

:root {

  /* --- FARBY: podklady ------------------------------------------------- */
  --podklad:          #F4EDE1;  /* hlavné pieskové pozadie stránky */
  --podklad-tmavsi:   #EDE4D5;  /* striedané sekcie, hlavičky tabuliek */
  --podklad-svetly:   #FBF7F0;  /* pozadie dashboardu (svetlejšie ako web) */
  --papier:           #FFFFFF;  /* karty, panely, formulárové polia */

  /* --- FARBY: písmo ---------------------------------------------------- */
  --text:             #14304F;  /* nadpisy a hlavný text - tmavá modrá */
  --text-jemny:       #4A6685;  /* popisky, sekundárny text */
  --text-slabsi:      #8A9CB0;  /* placeholdery, nenápadné údaje */

  /* --- FARBY: značka --------------------------------------------------- */
  --modra:            #1E4976;  /* primárne tlačidlá, aktívne prvky */
  --modra-tmava:      #163A5F;  /* hover stav primárneho tlačidla */
  --modra-svetla:     #E4EDF9;  /* podfarbenie aktívnej položky v menu */
  --zlata:            #C8862A;  /* akcent - rámy kariet, progress, logo */
  --zlata-svetla:     #E8D6B4;  /* jemné zlaté rámčeky */
  --zlata-podklad:    #F6E9D2;  /* podfarbenie zlatých štítkov a tipov */

  /* --- FARBY: stavy ---------------------------------------------------- */
  --zelena:           #2F7A4F;  /* zaplatené, zadarmo, úspech */
  --zelena-podklad:   #E3F0E8;
  --oranzova:         #B87514;  /* čaká, upozornenie */
  --oranzova-podklad: #FAEEDA;
  --cervena:          #A32B2B;  /* chyby */
  --cervena-podklad:  #F8E4E4;

  /* --- FARBY: čiary ---------------------------------------------------- */
  --ciara:            #E2D9C8;  /* bežné oddeľovače a rámy kariet */
  --ciara-silna:      #D2C6AF;  /* výraznejšie oddelenie (sidebar) */

  /* --- PÍSMA ------------------------------------------------------------
     DM Sans na všetko. Mockupy používajú jednotný bezpätkový rez,
     osobnosť nesie hrúbka a preložka písmen, nie druhé písmo.        */
  --pismo: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Veľkosti - clamp() zabezpečí plynulé zmenšenie na mobile */
  --v-xxl:  clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);  /* hero nadpis */
  --v-xl:   clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);  /* nadpisy sekcií */
  --v-l:    1.35rem;                                /* nadpisy kariet */
  --v-m:    1.05rem;                                /* zväčšený text */
  --v-s:    0.95rem;                                /* bežný text */
  --v-xs:   0.82rem;                                /* popisky, badge */
  --v-xxs:  0.72rem;                                /* eyebrow, tabuľky */

  /* --- ROZOSTUPY (4px mriežka) ----------------------------------------- */
  --r1: 4px;   --r2: 8px;   --r3: 12px;  --r4: 16px;
  --r5: 24px;  --r6: 32px;  --r7: 48px;  --r8: 64px;  --r9: 96px;

  /* --- ZAOBLENIE ------------------------------------------------------- */
  --oblenie-s:  6px;
  --oblenie-m:  10px;
  --oblenie-l:  16px;
  --oblenie-xl: 22px;

  /* --- TIENE ------------------------------------------------------------
     Veľmi jemné - inštitucionálny vzhľad, nie "startupový" */
  --tien-s: 0 1px 2px rgba(92, 64, 22, 0.06);
  --tien-m: 0 3px 10px rgba(92, 64, 22, 0.08);
  --tien-l: 0 10px 32px rgba(92, 64, 22, 0.12);

  /* --- ROZMERY LAYOUTU ------------------------------------------------- */
  --sirka-obsahu:  1180px;  /* max. šírka verejného webu */
  --sirka-sidebar: 264px;   /* šírka bočného menu v dashboarde */

  /* --- ANIMÁCIE -------------------------------------------------------- */
  --prechod: 160ms ease;
}

/* Rešpektovanie systémového nastavenia "obmedziť pohyb" (prístupnosť) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}