/* ==========================================================================
   ethel.cz — design tokeny (grafický manuál webu v2.0, 27. 9. 2026)
   Manuál: https://ethel.cz/brand/  (repo ethel-web, brand/index.html)

   Jediný zdroj barev, písem, rádiusů a rozměrů pro celý web. Komponenty
   jsou v ethel.css a forms.css a berou hodnoty výhradně odsud — žádná barva
   natvrdo mimo tenhle soubor (výjimka: SVG loga, která mají barvy v sobě).
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Plochy ---------------------------------------------------------- */
  --page:        #F3F6F7;   /* pozadí stránky, hero, hlavička */
  --surface:     #FFFFFF;   /* bílé bloky, karty, okno Ethel */
  --surface-alt: #EAF0F3;   /* šedé bloky, lišta okna, pozadí grafů */
  --border:      #CDD9DF;   /* všechny linky a rámečky ve světlé části */

  /* --- Text ------------------------------------------------------------ */
  --text:        #172B38;   /* inkoust: nadpisy, běžný text, tmavé plochy */
  --text-muted:  #526774;   /* popisky, doprovodný text; ne pod 12 px */

  /* --- Značka: modrá --------------------------------------------------- */
  --brand:       #326C92;   /* tečka v logu, odkazy, plná tlačítka, ikony */
  --on-brand:    #FFFFFF;
  --brand-tint:  #E0ECF3;   /* bubliny, chipy, ikonové dlaždice, CTA pás */
  --focus:       #326C92;

  /* --- Akcent: terakota ------------------------------------------------ */
  /* Ručně psané poznámky, čárka před eyebrow, vybraný příklad, čísla kroků,
     „zaškrtnutí" v ceníku, hvězdička u povinných polí. Nikdy plocha, nikdy
     tlačítko — akcent ukazuje, nevolá k akci. */
  --accent:      #B64722;   /* text a drobné prvky */
  --accent-line: #E66E4D;   /* linky, rámečky, tečka v animaci */
  --accent-tint: #FBEDE7;   /* podklad štítků a čísel kroků */
  --accent-on-ink: #FFAA83; /* akcent na inkoustovém podkladu (aktivní přepínač ceny) */

  /* --- Tmavá plocha (jeden blok na webu + patička) --------------------- */
  --ink:         #172B38;
  --ink-surface: #223E50;   /* karta na tmavé ploše */
  --ink-border:  #3F5D70;
  --ink-icon:    #2E4C60;   /* dlaždice ikony na tmavé ploše */
  --ink-rule:    #334550;   /* linka v patičce */
  --ink-text:    #EDF3F6;
  --ink-body:    #D5E0E7;   /* text karet na tmavé ploše */
  --ink-muted:   #A8BAC6;
  --ink-link:    #91BEDC;   /* odkazy a ikony na tmavé ploše */
  --ink-text-2:  #C9D6DE;   /* běžný text patičky */

  /* --- Stavy (formuláře; success a warning zatím bez použití) ---------- */
  --success:     #346B48;
  --warning:     #94621D;
  --danger:      #AE3F45;

  /* --- Data a animace -------------------------------------------------- */
  --chart-muted: #BFD6E6;   /* sloupce grafu mimo aktuální období */
  --pulse-blue:  #348FEA;   /* rozsvícená tečka, 1. fáze */
  --pulse-warm:  #E66E4D;   /* rozsvícená tečka, 2. fáze (= --accent-line) */

  /* --- Okno Ethel = aplikace ------------------------------------------- */
  /* Ukázka okna kreslí skutečnou aplikaci (ethel-app, src/tokens.css): plochy
     jsou v ní NEUTRÁLNÍ šedé, ne namodralé jako stránka kolem. Uvnitř
     .hero-product tyhle hodnoty přepíšou --page, --surface-alt a --border. */
  --win-page:        #F7F7F8;   /* pozadí chatu */
  --win-chrome:      #EDEDEF;   /* lišta okna, levý pás, spodní lišta */
  --win-border:      #D6D8DC;   /* linky a rámečky v okně */
  --win-bubble-bot:  #EBEBED;   /* bublina Ethel */
  --win-bubble-user: #EEF4F9;   /* bublina uživatele, bez obrysu */

  /* Tmavý motiv aplikace = zrcadlo světlého: neutrální plochy, text a modrá
     z tmavé palety (--ink-text, --ink-muted, --ink-link), plné tlačítko #326C92.
     Na webu jen v ukázce okna s třídou .window-dark (manuál, sekce 07). */
  --win-dark-page:        #1A1C1F;   /* pozadí chatu */
  --win-dark-surface:     #232529;   /* pole, karty, nabídky */
  --win-dark-chrome:      #141518;   /* lišta okna, levý pás, spodní lišta */
  --win-dark-border:      #33363B;
  --win-dark-bubble-bot:  #2B2D31;   /* bublina Ethel */
  --win-dark-bubble-user: #20313D;   /* bublina uživatele (26 % #326C92) */
  --win-dark-tint:        #213441;   /* aktivní položka, podklad štítků (30 % #326C92) */

  /* --- Písmo ----------------------------------------------------------- */
  /* Segoe UI = písmo Windows a Heliosu; web má vypadat jako nástroj, který
     v Heliosu žije. Mimo Windows padá na systémové písmo platformy. */
  --font-body:    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-code:    Consolas, "Cascadia Mono", ui-monospace, Menlo, monospace;
  --font-hand:    "Caveat", "Segoe Print", cursive;   /* jen ručně psané poznámky */

  --weight-display: 650;   /* h1–h3; na Windows = Segoe UI Semibold */
  --weight-ui:      550;   /* navigace, otázky ve FAQ */

  /* --- Rádiusy --------------------------------------------------------- */
  --radius-control: 7px;    /* tlačítka, pole, drobné štítky, přepínače */
  --radius-card:    14px;   /* karty, okno Ethel, fotka autora */
  --radius-bubble:  10px;   /* bubliny v chatu, formulářový panel */
  --radius-pill:    999px;

  /* --- Rozměry --------------------------------------------------------- */
  --layout-width:  1120px;
  --gutter:        32px;    /* okraj po stranách; 20 px pod 850 px */
  --nav-height:    82px;
  --block-space:   84px;    /* svislý rytmus bloků; 60 px pod 850 px */

  /* --- Stíny ----------------------------------------------------------- */
  --shadow-window: 0 18px 48px rgba(23, 43, 56, 0.047);   /* okno Ethel */
  --shadow-lift:   0 10px 26px rgba(23, 43, 56, 0.078);   /* vybraný příklad */
  --shadow-float:  0 18px 48px rgba(23, 43, 56, 0.078);   /* zvýrazněný tarif */
  --shadow-modal:  0 18px 48px rgba(23, 43, 56, 0.122);   /* cookie lišta */
}

@media (max-width: 850px) {
  :root { --gutter: 20px; --block-space: 60px; --nav-height: 76px; }
}