/* ════════════════════════════════════════════════════════════════════════
   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;

  --fs-body:    16px;
  --fs-small:   13.5px;
  --fs-tiny:    11.5px;
  --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:     50;
  --z-nav:        49;
  --z-filter:     48;
  --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;
}