/* ELEKOLA design tokens v2 (09/2026) — čistší, minimalističtější, hravější a KULATÝ systém. Jeden zdroj pravdy pro web i CRM.
   Brand manuál v2 = petrpan.cz/elekola-brand (apps/brand). Tailwind config čte tokeny odsud, nikdy hodnoty natvrdo. */
:root {
  /* Barvy — poměr na webu ~60 % světlé, 30 % černé, 10 % žluté. Beze změny proti v1, doplněno jen Nebe. */
  --ele-yellow: #F2BB05;        /* Elektro žlutá — signál, jedna žlutá akce na obrazovku; text na ní VŽDY černý */
  --ele-yellow-dark: #C99A00;   /* Tmavá žlutá — text na světlé, hover */
  --ele-yellow-light: #FBE9A6;  /* Světlá žlutá — podklady, badge */
  --ele-asphalt: #111111;       /* Asfalt — vážnost, technika; hlavička */
  --ele-graphite: #2B2B2B;      /* Grafit — karty na tmavé */
  --ele-steel: #4A4A4A;         /* Ocel — běžný text */
  --ele-alu: #8A8A8A;           /* Hliník — popisky */
  --ele-concrete: #D9D6CE;      /* Beton — linky, rámečky (1 px) */
  --ele-cloud: #F2F2F2;         /* Oblak — neutrální podklad ikon */
  --ele-chalk: #F7F6F2;         /* Křída — teplá bílá, hlavní světlý podklad */
  --ele-white: #FFFFFF;
  --ele-sky: #DCE9F5;           /* Nebe (NOVÉ v2) — jediná doplněná barva: světlý chladný podklad pro hravý kontrast ke žluté; jen plochy/ikony, nikdy text */
  /* Funkční — jen stavy (skladem, chyba, info), nikdy dekorativně */
  --ele-ok: #2F8F4E;
  --ele-error: #D93B2B;         /* chyba i sleva */
  --ele-info: #2F6FB0;

  /* Typografie v2 — Bricolage Grotesque (titulky, čísla) + Rubik (text, tlačítka, labely). Self-host, latin + latin-ext.
     Titulky VĚTNĚ (ne verzálky), těsné prostrkání; verzálky jen malé labely/kickery. Čísla (750 W, 960 Wh) display 800. */
  --ele-font-display: "Bricolage Grotesque", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; /* 700 / 800 */
  --ele-font-text: "Rubik", system-ui, sans-serif;                                              /* 400 / 500 / 600 / 700 */
  --ele-fs-display: 88px; --ele-fs-h1: 60px; --ele-fs-h2: 40px; --ele-fs-h3: 26px;
  --ele-fs-perex: 20px; --ele-fs-text: 17px; --ele-fs-label: 13px; --ele-fs-price: 32px;
  --ele-lh-display: 1.02; --ele-lh-text: 1.55;
  --ele-tracking-display: -0.02em; /* titulky těsněji */
  --ele-tracking-label: 0.12em;    /* prostrkání jen u labelů 0.10–0.16 em */
  --ele-measure: 68ch;             /* šířka řádku 60–75 znaků */

  /* Grid a spacing — základ 8 px; desktop 12 sloupců, max 1280 px, gutter 24, okraj 80; mobil 4 sloupce, gutter 16, okraj 20 */
  --ele-container: 1280px; --ele-gutter: 24px; --ele-gutter-m: 16px; --ele-margin: 80px; --ele-margin-m: 20px;
  --ele-s1: 8px; --ele-s2: 16px; --ele-s3: 24px; --ele-s4: 32px; --ele-s5: 40px; --ele-s6: 48px; --ele-s8: 64px; --ele-s12: 96px;

  /* Tvary v2 — KULATÉ: škála rádiusů, pilulková tlačítka. Stíny stále žádné (výjimka --ele-shadow-float jen pro plovoucí prvky). */
  --ele-radius-s: 10px;         /* pole, chipy, malé štítky, obrázky v kartách */
  --ele-radius: 16px;           /* karty, panely, dlaždice */
  --ele-radius-l: 24px;         /* hero média, velké sekce, galerie */
  --ele-radius-pill: 999px;     /* tlačítka, štítky, avatar (kruh) */
  --ele-line: 1px solid var(--ele-concrete); --ele-accent-line: 3px solid var(--ele-yellow);
  --ele-shadow-float: 0 8px 24px rgba(17, 17, 17, 0.08); /* jen sticky lišta, dialogy, menu — karty NIKDY */

  /* Komponenty */
  --ele-control-h: 52px;        /* tlačítka i pole (md) */
  --ele-control-h-sm: 44px;
  --ele-control-h-lg: 60px;
  --ele-nav-h-mobile: 64px;
  --ele-nav-h-desktop: 123px;
  --ele-nav-h: var(--ele-nav-h-mobile); /* celá viditelná hlavička pro sticky/anchor offsety */
  --ele-btn-font: 600 16px/1 var(--ele-font-text); --ele-btn-tracking: 0; /* tlačítka VĚTNĚ, Rubik 600, bez prostrkání */
  --ele-btn-pad: 28px;
  --ele-focus-ring: 0 0 0 3px var(--ele-white), 0 0 0 6px var(--ele-yellow);
  --ele-icon-stroke: 2px;       /* Lucide, kulaté zakončení (round caps/joins), mřížka 24 px, jedna barva */
}

@media (min-width: 1080px) {
  :root {
    --ele-nav-h: var(--ele-nav-h-desktop);
  }
}