/**
 * CSS Custom Properties - Globalne zmienne dla wszystkich gier
 * Każda gra może nadpisać te wartości w swoim style.css
 */

:root {
  /* === KOLORY - dziecięce, pastelowe === */
  --color-primary: #FF6B9D;        /* Różowy */
  --color-secondary: #A78BFA;      /* Fioletowy */
  --color-success: #4ECDC4;        /* Turkusowy */
  --color-warning: #FFD93D;        /* Żółty */
  --color-danger: #FF6B6B;         /* Czerwony (delikatny) */
  --color-info: #6BCF7F;           /* Zielony */

  /* Paleta tęczowa (dla kart, confetti, etc.) */
  --rainbow-pink: #FF6B9D;
  --rainbow-purple: #A78BFA;
  --rainbow-blue: #6B9DFF;
  --rainbow-green: #6BCF7F;
  --rainbow-yellow: #FFD93D;
  --rainbow-orange: #FFA07A;

  /* Tła */
  --color-bg: #F5FBFF;             /* Jasne tło */
  --color-bg-secondary: #E8F4FF;   /* Drugie tło */
  --color-bg-dark: #2D3748;        /* Ciemne tło (dla kontrastów) */

  /* Tekst */
  --color-text: #2D3748;           /* Główny tekst */
  --color-text-light: #718096;     /* Jaśniejszy tekst */
  --color-text-white: #FFFFFF;     /* Biały tekst */

  /* === SPACING === */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */

  /* === KARTY === */
  --card-gap: 0.5rem;              /* Odstęp między kartami */
  --card-border-radius: 1rem;      /* Zaokrąglenie rogów */
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* === PRZYCISKI === */
  --btn-padding: 0.75rem 2rem;
  --btn-border-radius: 2rem;       /* Bardzo zaokrąglone */
  --btn-font-size: 1.125rem;       /* 18px - duże dla dzieci */
  --btn-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --btn-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.15);

  /* === TIMINGS / ANIMACJE === */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;

  --flip-duration: 0.6s;           /* Czas obrotu karty */
  --match-delay: 800ms;            /* Opóźnienie przed schowaniem niedopasowanych kart */
  --mismatch-delay: 600ms;         /* Opóźnienie pokazania błędu */

  /* === TYPOGRAFIA === */
  --font-family: 'Montserrat', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  --font-size-3xl: 3rem;      /* 48px */

  /* === Z-INDEX === */
  --z-card: 1;
  --z-card-flipped: 10;
  --z-modal: 100;
  --z-overlay: 99;
  --z-header: 50;

  /* === BREAKPOINTS (dla JS) === */
  --breakpoint-mobile: 576px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 992px;
  --breakpoint-wide: 1200px;
}

/* === DARK MODE (opcjonalnie dla przyszłości) === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1A202C;
    --color-bg-secondary: #2D3748;
    --color-text: #E2E8F0;
    --color-text-light: #A0AEC0;
  }
}

/* === REDUCED MOTION (dostępność) === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0s;
    --transition-normal: 0s;
    --transition-slow: 0s;
    --flip-duration: 0s;
  }
}