/* ═══════════════════════════════════════════════════════════════
   Doughnut Czechia E-shop — shared.css
   Sdílené tokeny, reset a komponenty společné pro všechny stránky.

   Obsah:
   1. Design tokens
   2. Reset & Base
   3. Eshop Header
   4. Utility
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  /* Barvy */
  --color-primary: #52d15b;
  --color-accent:  #002fff;
  --color-white:   #ffffff;
  --color-black:   #000000;
  --color-grey:    #f5f5f5;
  --color-error:   #c00000;

  /* Zkratky (zpětná kompatibilita s původním kódem) */
  --cp: var(--color-primary);
  --ca: var(--color-accent);

  /* Typografie */
  --font: 'Funnel Sans', system-ui, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-lg:   1rem;
  --fs-xl:   1.0625rem;
  --fs-2xl:  1.375rem;
  --fs-3xl:  1.75rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:   1.2;
  --lh-base:    1.6;
  --lh-relaxed: 1.7;

  /* Zaoblení */
  --r:  6px;
  --rl: 10px;
  --rs: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   2. RESET & BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--color-black);
  background: var(--color-grey);
  line-height: var(--lh-base);
}

img { display: block; max-width: 100%; }


/* ═══════════════════════════════════════════════════════════════
   3. ESHOP HEADER
═══════════════════════════════════════════════════════════════ */
.eshop-header {
  background: var(--color-primary);
  border-bottom: 2px solid var(--color-black);
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.eshop-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.eshop-logo__img {
  height: 40px;
  width: auto;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════
   4. UTILITY
═══════════════════════════════════════════════════════════════ */

/* Viditelnost — přepínáno přes JS */
.u-hidden { display: none !important; }

/* Přístupnost */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}