/* ════════════════════════════════════════════════════════════════════════
   00-tokens.css — VOALA design tokens (jediný zdroj pravdy)

   Zdroj: Figma VOALA_WEB_2025 → Variables + design guide.
   Změna tady = změna v celém webu.
   ════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand (Figma Variables 1:1) ────────────────────────────────────── */
  --red-voala:       #EA515B;   /* RED_VOALA — akcent, CTA, ikony, odkazy */
  --black-voala:     #2A3133;   /* BLACK_VOALA — hlavní text */
  --white-voala:     #FAFAFA;   /* WHITE_VOALA — pozadí stránek + header */
  --gray-voala:      #EAEAEA;   /* VOALA_DARK_GRAY — pozadí footeru a sekcí */

  /* Odvozeniny (hover stavy — HSL posun brand červené) */
  --red-voala-dark:  #d93e48;
  --red-voala-soft:  #fdeeef;

  /* ── Aliasy pro boilerplate komponenty (buttons, forms, woo…) ───────── */
  --pink:          var(--red-voala);
  --pink-dark:     var(--red-voala-dark);
  --pink-50:       var(--red-voala-soft);
  --pink-100:      #fbdcde;
  --pink-200:      #f6b9bd;
  --bg-warm:       var(--gray-voala);
  --bg-warm-light: #f1f1f1;
  --yellow-cta:    var(--red-voala);
  --yellow-hover:  var(--red-voala-dark);
  --burgundy:      var(--gray-voala);   /* footer je světlý! */
  --burgundy-text: var(--black-voala);
  --burgundy-muted:rgba(42, 49, 51, .6);

  /* ── Neutrály ───────────────────────────────────────────────────────── */
  --black:         #020202;
  --ink:           var(--black-voala);
  --muted:         rgba(42, 49, 51, .6);
  --line:          rgba(42, 49, 51, .15);
  --line-soft:     #f1f1f1;
  --bg:            var(--white-voala);
  --bg-soft:       #f4f4f4;

  /* ── Funkční barvy ──────────────────────────────────────────────────── */
  --success:       #15803d;
  --success-soft:  #f0fdf4;
  --success-border:#bbf7d0;
  --warning:       #c2410c;
  --warning-soft:  #fff4ef;
  --warning-border:#fed7aa;
  --star:          #f5b800;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --container:      1222px;   /* tělo stránky z Figmy: x=109, šířka 1222 (Line 1–6, header, footer) */
  --gutter:         24px;

  /* ── Border radius ──────────────────────────────────────────────────── */
  --radius-sm:     5px;       /* obrázky mají ve Figmě radius 5px */
  --radius:        10px;
  --radius-lg:     20px;
  --radius-pill:   999px;

  /* ── Shadow ─────────────────────────────────────────────────────────── */
  --shadow-header: 0 0 5px 5px rgba(0, 0, 0, .05);       /* header bar (Figma) */
  --shadow-map:    0 4px 4px -2px rgba(24, 39, 75, .08); /* mapa ve footeru */
  --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(0, 0, 0, .18);
  --shadow-pink:   0 6px 18px rgba(234, 81, 91, .28);
  --shadow-pink-h: 0 14px 34px rgba(234, 81, 91, .40);
  --shadow-yellow: 0 6px 14px rgba(234, 81, 91, .30);

  /* ── Typografie — Inter self-host (00-fonts.css) ────────────────────── */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-h1:      clamp(30px, 4vw, 58px);
  --fs-h2:      clamp(24px, 2.8vw, 42px);
  --fs-h3:      clamp(18px, 1.7vw, 24px);
  --fs-h4:      clamp(14px, 1.2vw, 18px);
  --fs-h5:      clamp(13px, 1.05vw, 15px);
  --fs-h6:      clamp(12px, .95vw, 14px);

  --fs-large:   clamp(16px, 1.3vw, 18px);
  --fs-body:    clamp(14.5px, 1.15vw, 16px);
  --fs-small:   clamp(12.5px, 1.05vw, 13.5px);
  --fs-tiny:    clamp(10.5px, .9vw, 11.5px);

  --fs-button:    clamp(13.5px, 1.1vw, 14.5px);
  --fs-button-lg: clamp(14.5px, 1.2vw, 15.5px);
  --fs-eyebrow:   clamp(11.5px, .95vw, 13px);
  --fs-badge:     clamp(10px, .8vw, 11px);

  /* Overlay menu — velké odkazy (Figma 64px/120 %) */
  --fs-overlay-link: clamp(32px, 6vw, 64px);

  --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;
  --z-filter:     90;
  --z-mobile-cta: 60;
  --z-drawer:     201;   /* fullscreen overlay menu */
  --z-backdrop:   200;
}

/* ── Selection ───────────────────────────────────────────────────────── */
::selection {
  background: var(--pink-100);
  color: var(--ink);
}

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