/* ============================================================================
   DESIGN TOKENS  —  Prevence pro Život 2.1
   Jediné místo pro správu vizuální identity (barvy, typografie, spacing).

   Barevná strategie 2.1:
   • Deep-purple gradient (primary) = hlavní barva rozhraní
   • Hot-magenta = energie, srdce, CTA
   • Teal = pozitivní potvrzení, akce
   • Warm-slate neutraly = klidný, prémiový feel
   ============================================================================ */

:root {
  /* ---- Značka / brand ---- */
  --color-primary: #6d3f9c;
  --color-primary-dark: #552f80;
  --color-primary-light: #f4effb;
  --color-primary-tint: #e5dcf3;
  --color-secondary: #c4378d;
  --color-secondary-dark: #a32d75;
  --color-accent: #0e8f8c;
  --color-accent-dark: #0b7371;
  --color-accent-light: #e3f4f3;

  /* Přechody */
  --grad-brand: linear-gradient(135deg, #5f3690 0%, #b1358a 100%);
  --grad-brand-soft: linear-gradient(135deg, #6d3f9c 0%, #9c4b9e 100%);
  --grad-hero: linear-gradient(160deg, #f8f5fc 0%, #eee8f5 40%, #e8f4f3 100%);
  --grad-cta: linear-gradient(135deg, #1d212b 0%, #2a2440 60%, #3d2563 100%);
  --grad-card-hover: linear-gradient(160deg, rgba(109,63,156,0.04), rgba(196,55,141,0.04));
  --grad-footer: linear-gradient(180deg, #1a1e28 0%, #141720 100%);

  /* ---- Neutrály ---- */
  --color-ink: #1a1e28;
  --color-body: #4a5068;
  --color-muted: #6e7587;
  --color-line: #e5e7ec;
  --color-line-soft: #eef0f4;
  --color-surface: #f7f8fa;
  --color-surface-2: #eef0f4;
  --color-white: #ffffff;
  --color-dark: #1a1e28;
  --color-dark-2: #23273a;

  /* ---- Typografie ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: var(--font-sans);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  --fs-display: clamp(2.5rem, 1.5rem + 4vw, 4rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.65;

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

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 8rem;

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Stíny ---- */
  --shadow-xs: 0 1px 2px rgba(26,30,40,0.04);
  --shadow-sm: 0 2px 4px rgba(26,30,40,0.04), 0 4px 12px rgba(26,30,40,0.03);
  --shadow: 0 4px 16px rgba(26,30,40,0.06), 0 12px 32px rgba(26,30,40,0.04);
  --shadow-lg: 0 8px 24px rgba(26,30,40,0.08), 0 24px 56px rgba(26,30,40,0.06);
  --shadow-xl: 0 16px 48px rgba(26,30,40,0.10), 0 32px 80px rgba(26,30,40,0.08);
  --shadow-brand: 0 8px 24px rgba(109,63,156,0.22), 0 16px 48px rgba(109,63,156,0.12);
  --shadow-card: 0 1px 3px rgba(26,30,40,0.04), 0 6px 18px rgba(26,30,40,0.04);
  --shadow-card-hover: 0 8px 28px rgba(26,30,40,0.10), 0 20px 48px rgba(26,30,40,0.06);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* ---- Pohyb ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: 200ms var(--ease);
  --transition-slow: 360ms var(--ease);
  --transition-spring: 500ms var(--ease-spring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}