/* ════════════════════════════════════════════════════════════════════════
   00-tokens.css — Design tokens (jediný zdroj pravdy pro barvy, typo, layout)

   Hodnoty kopírují docs/DESIGN.md.
   Změna tady = změna v celém webu.
   ════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand: růžová (CTA, akcenty) ────────────────────────────────── */
  --pink:          #ea4366;    /* hlavní CTA, akcenty, eyebrow */
  --pink-dark:     #c8334f;    /* hover stav primary tlačítka */
  --pink-50:       #fef0f3;    /* jemné pozadí (sekce, hover) */
  --pink-100:      #fde0e7;
  --pink-200:      #fad0db;

  /* ── Žlutá paleta (akcentní sekce) ──────────────────────────────── */
  --bg-warm:       #f3dc7c;    /* sytá žlutá (hero, atlas banner) */
  --bg-warm-light: #fdf6dc;    /* jemná žlutá (čakry, recenze) */
  --yellow-cta:    #ecc94b;    /* sekundární tlačítko (ghost) */
  --yellow-hover:  #d4ad2f;    /* hover ghost */

  /* ── Burgundy (footer ≈ RAL 4002) ───────────────────────────────── */
  --burgundy:      #6E3D4F;
  --burgundy-text: #e5cfd6;    /* světlý text na burgundy */
  --burgundy-muted:#d4b5be;    /* muted text na burgundy */

  /* ── Neutrály ──────────────────────────────────────────────────── */
  --black:         #020202;    /* top bar pozadí */
  --ink:           #1a1a1a;    /* hlavní text */
  --muted:         #6b6b6b;    /* sekundární text */
  --line:          #ececec;    /* hranice */
  --line-soft:     #f4f4f4;    /* jemné hranice */
  --bg:            #ffffff;    /* hlavní pozadí webu */
  --bg-soft:       #fafafa;    /* alternativní šedé pozadí (SEO blok, atd.) */

  /* ── Funkční barvy ──────────────────────────────────────────────── */
  --success:       #15803d;    /* skladem, ověřený zákazník */
  --success-soft:  #f0fdf4;
  --success-border:#bbf7d0;
  --warning:       #c2410c;    /* nízký sklad */
  --warning-soft:  #fff4ef;
  --warning-border:#fed7aa;
  --star:          #f5b800;    /* hvězdy v recenzích */

  /* ── Layout ─────────────────────────────────────────────────────── */
  --container:     1480px;
  --gutter:        24px;

  /* ── Border radius ──────────────────────────────────────────────── */
  --radius-sm:     8px;
  --radius:        14px;       /* karta produktu, button na kartě */
  --radius-lg:     22px;       /* velké karty kategorie, hlavní fotka produktu */
  --radius-pill:   999px;      /* tlačítka, pill chips */

  /* ── Shadow ─────────────────────────────────────────────────────── */
  --shadow-sm:     0 2px 8px rgba(2,2,2,.04);
  --shadow:        0 6px 24px rgba(2,2,2,.06);
  --shadow-lg:     0 18px 60px rgba(234,67,102,.18);
  --shadow-pink:   0 6px 18px rgba(234,67,102,.28);
  --shadow-pink-h: 0 14px 34px rgba(234,67,102,.40);
  --shadow-yellow: 0 6px 14px rgba(212,173,47,.30);

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Fluid typografie přes clamp(min, fluid, max).
     POZN.: Header (topbar, nav, search, drawer) NEPOUŽÍVÁ tyto tokeny —
     má fixní px hodnoty v 03-header.css / 04-nav.css. */

  /* Nadpisy */
  --fs-h1:      clamp(28px, 3.6vw, 52px);   /* hero/landing H1 */
  --fs-h2:      clamp(22px, 2.6vw, 40px);   /* sekce H2 (Vyberte si svůj směr) */
  --fs-h3:      clamp(18px, 1.7vw, 24px);   /* kartičky, atlas card title */
  --fs-h4:      clamp(13px, 1.1vw, 16px);   /* footer h4, side panel labels */
  --fs-h5:      clamp(13px, 1.05vw, 15px);
  --fs-h6:      clamp(12px, .95vw, 14px);

  /* Body texty */
  --fs-large:   clamp(15px, 1.3vw, 17px);   /* hero p, intro odstavec */
  --fs-body:    clamp(14.5px, 1.1vw, 16px); /* default body */
  --fs-small:   clamp(12.5px, 1.05vw, 13.5px);
  --fs-tiny:    clamp(10.5px, .9vw, 11.5px);

  /* UI elementy */
  --fs-button:  clamp(13.5px, 1.1vw, 14.5px); /* default tlačítko */
  --fs-button-lg: clamp(14.5px, 1.2vw, 15.5px); /* hero/lg tlačítko */
  --fs-eyebrow: clamp(11.5px, .95vw, 13px);   /* growth eyebrow nad H2 */
  --fs-badge:   clamp(10px, .8vw, 11px);      /* product badges, banner tag */

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

  /* ── Transitions ───────────────────────────────────────────────── */
  --t-fast:    .15s ease;
  --t-base:    .25s ease;
  --t-slow:    .5s ease;

  /* ── Z-index plán ──────────────────────────────────────────────── */
  --z-header:     110;
  --z-nav:        100;    /* nav + mega-menu nad veškerým obsahem stránky */
  --z-filter:     90;
  --z-mobile-cta: 60;
  --z-drawer:     201;
  --z-backdrop:   200;
}

/* ── Selection (na celé stránce) ─────────────────────────────────── */
::selection {
  background: var(--pink-100);
  color: var(--ink);
}

/* ── Scrollbar (Firefox) ────────────────────────────────────────── */
html {
  scrollbar-color: var(--pink-200) transparent;
  scrollbar-width: thin;
}