/* ===========================================================
   ALGOTRADERMARTIN.CZ · DESIGN TOKENS
   Master hodnot. Kdo chce barvu, písmo nebo rozestup, bere si ho ODSUD.
   Změna hodnoty tady se promítne do všech stránek.

   🔴 NIKDY nepiš barvu ani rozměr natvrdo do stránky ani do styl.css.
      Chybí ti hodnota? Přidej ji sem.

   Zdroj hodnot: „Design systém webu Algotrader Martin" (9. 9. 2026).
   Proč to tak je: design-system.md · Jak se z toho staví: STAVEBNICE-WEB.md
   =========================================================== */

:root {

  /* --- Plochy a text -------------------------------------
     Světlý základ, ne dark mode. Stránka leží na velmi světle
     šedé, obsah stojí na bílých kartách. Text je tmavá modrošedá,
     nikdy čistá černá — ta na bílé řeže do očí.
     Ověřené kontrasty jsou v design-system.md.               */

  --pozadi:        #F7F8FA;   /* pozadí celé stránky */
  --pozadi-rgb:    247 248 250;
  --povrch:        #FFFFFF;   /* karty, bloky, střídavé pásy, snímky */
  --povrch-rgb:    255 255 255;
  --povrch-2:      #FFFFFF;   /* rám na snímek — bílá karta, viz styl.css */
  --linka:         #E5E7EB;   /* oddělovače a okraje */
  --nadpis:        #172033;   /* nadpisy */
  --text:          #172033;   /* VŠECHEN čtený text */
  --text-tlumeny:  #5B6475;   /* popisky, metadata, patička */

  /* --- Značka --------------------------------------------
     Technická modrá: data, důvěra, přesnost. Ne zelená —
     ta v tomhle oboru znamená „zisk" a „PASSED", takže by web
     ke každé větě mimoděk křičel „zisk!". Podrobně: design-system.md §1.

     Pozor na dvojici tokenů:
       --akcent        = barva TEXTU (odkazy, nadhlaví, ikony)
       --akcent-plocha = barva VÝPLNĚ tlačítka
     V tmavých sekcích se přepisuje jen ten první; tlačítko musí
     zůstat značkově modré všude.                              */

  --akcent:        #1769AA;   /* odkazy a textové akcenty */
  --akcent-rgb:    23 105 170;
  --akcent-tmavsi: #125582;   /* odkaz pod myší */
  --akcent-plocha: #1769AA;   /* výplň tlačítka — NIKDY se nepřepisuje */
  --akcent-plocha-hover: #125582;
  --na-akcentu:    #FFFFFF;   /* text na tlačítku */

  /* --- Tmavé plochy --------------------------------------
     Jen na vybrané výrazné sekce a na patičku. NIKDY jako pozadí
     celého webu.                                              */

  --tmava:         #111827;
  --tmava-text:    #FFFFFF;
  --tmava-tlumeny: #CBD5E1;
  --tmava-akcent:  #8FC9F2;   /* odkaz na tmavém — značková modrá tam má jen 3,1 : 1 */

  /* --- Manifest ------------------------------------------
     Pozicovací blok na domovské stránce. Jemně modrý, aby se choval
     jako prohlášení značky, ne jako běžný odstavec.            */

  --manifest:       #EEF6FC;
  --manifest-linka: #D7E8F5;

  /* --- Data ----------------------------------------------
     JEN pro hodnoty ve snímcích, tabulkách a stavech.
     🔴 Nikdy jako barva odkazu nebo tlačítka.
     ⚠️ --pozor je oproti zadání ztmavená z #B7791F: ta má na světlém
        pozadí jen 3,4 : 1, tedy pod AA. #946217 drží 4,9 : 1.        */

  --zisk:   #16803A;          /* PASS, splněný test */
  --pozor:  #946217;          /* upozornění, zvýšené riziko */
  --ztrata: #B42318;          /* FAIL, zamítnutí strategie */

  /* --- Písmo ---------------------------------------------
     Inter na všechno. Mono není hlavní písmo, jen štítky a čísla:
     mají v něm stejnou šířku, takže se dají srovnat pod sebe.  */

  --pismo:      "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pismo-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --text-zaklad:  18px;       /* čtený text na desktopu */
  --text-mobil:   17px;       /* na mobilu nikdy pod 17 px */
  --text-popisek: 14px;       /* popisky, metadata, poznámky */
  --text-radek:   1.65;
  --text-radek-mobil: 1.6;

  /* --- Rozestupy (stupnice po 8 px, ne náhodná čísla) ----- */

  --mezera-1:   8px;
  --mezera-2:  16px;
  --mezera-3:  24px;
  --mezera-4:  32px;
  --mezera-5:  48px;
  --mezera-6:  64px;
  --mezera-7:  96px;          /* mezi hlavními sekcemi na desktopu */
  --mezera-8: 120px;

  /* --- Tvar ----------------------------------------------
     🔴 Každý poloměr má svůj token. Jedno univerzální zaoblení
        udělá z tlačítka kartu a z karty tlačítko.             */

  --oblouk-tlacitko:  8px;
  --oblouk:          12px;    /* karty */
  --oblouk-snimek:   12px;    /* rám na snímek */
  --oblouk-blok:     16px;    /* velké CTA a manifest */

  /* --- Stíny ---------------------------------------------
     Velmi jemné. Žádné neonové záře.

     🔴 Dvě vrstvy, ne jedna. Blízká (1 px) kreslí hranu, vzdálená
        (24 px) dělá hloubku. Se samotnou vzdálenou vrstvou zmizí
        bílá karta na bílé sekci — okraj #E5E7EB má proti bílé
        1,24 : 1, což je za hranicí viditelnosti.                */

  --stin:       0 1px 2px rgba(23, 32, 51, 0.07), 0 8px 24px rgba(23, 32, 51, 0.07);
  --stin-vyssi: 0 2px 4px rgba(23, 32, 51, 0.10), 0 14px 32px rgba(23, 32, 51, 0.12);

  /* --- Šířky --------------------------------------------- */

  --pas:     1200px;          /* obsahový pás */
  --sloupec:  720px;          /* čtený text — nikdy přes celou šířku */
  --nadpis-sirka: 760px;      /* H1 se nesmí roztáhnout přes monitor */
  --okraj:     24px;          /* vnější okraj (na mobilu 16 px) */
}

@media (max-width: 900px) {
  :root {
    --okraj: 16px;
    --text-zaklad: var(--text-mobil);
    --text-radek: var(--text-radek-mobil);
  }
}