/* variables.css - Centralne zmienne CSS dla całej aplikacji */

:root,
[data-theme="light"] {
  /* Kolory tła */
  --background-primary: #f5f5f7;
  --background-secondary: #fff;
  --background-surface: #eaeaea;
  
  /* Kolory tekstu */
  --foreground-primary: #23242d;
  --foreground-secondary: #292a35;
  --foreground-muted: #7a7a85;
  
  /* Kolory akcentowe */
  --accent-main: #0EA25A;
  --accent-info: #5bc5ff;
  --accent-warning: #ffc107;
  --accent-danger: #dc3545;
  --accent-success: #198754;
  
  /* Kolory Bootstrap - kompatybilność */
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  
  /* Kolory dodatkowe */
  --divider: #d1d1e0;
  --border-color: #dee2e6;
  
  /* Typografia */
  --font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-size-heading: 2.4rem;
  --font-size-subheading: 1.6rem;
  --font-size-body: 1rem;
  --font-size-label: 0.875rem;
  --font-size-button: 1rem;
  --font-size-caption: 0.75rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --letter-spacing: 0.01em;
  --line-height-heading: 1.2;
  --line-height-body: 1.5;
  
  /* Cienie */
  --shadow-card: 0 2px 16px rgba(0,0,0,0.08);
  --shadow-modal: 0 4px 32px rgba(0,0,0,0.12);
  --shadow-button: 0 2px 8px rgba(0,0,0,0.1);
  
  /* Zaokrąglenia */
  --radius-card: 1.5rem;
  --radius-button: 0.75rem;
  --radius-input: 0.75rem;
  --radius-small: 0.375rem;
  
  /* Odstępy */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  
  /* Przejścia */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

[data-theme="dark"] {
  /* Kolory tła - tryb ciemny */
  --background-primary: #23242d;
  --background-secondary: #292a35;
  --background-surface: #1a1b23;
  
  /* Kolory tekstu - tryb ciemny */
  --foreground-primary: #eaeaea;
  --foreground-secondary: #b0b0b5;
  --foreground-muted: #7a7a85;
  
  /* Kolory dodatkowe - tryb ciemny */
  --divider: #343445;
  --border-color: #495057;
  
  /* Cienie - tryb ciemny */
  --shadow-card: 0 2px 16px rgba(0,0,0,0.16);
  --shadow-modal: 0 4px 32px rgba(0,0,0,0.32);
  --shadow-button: 0 2px 8px rgba(0,0,0,0.2);
}

/* Zmienne responsywne */
@media (max-width: 1200px) {
  :root {
    --font-size-heading: 2rem;
    --font-size-subheading: 1.4rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-heading: 1.8rem;
    --font-size-subheading: 1.2rem;
    --font-size-body: 0.95rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --radius-card: 1rem;
    --radius-button: 0.5rem;
    --radius-input: 0.5rem;
  }
}

@media (max-width: 576px) {
  :root {
    --font-size-heading: 1.6rem;
    --font-size-subheading: 1.1rem;
    --font-size-body: 0.9rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1.5rem;
  }
}