/*
  _variables.css
  Zmienne globalne: kolory, fonty, spacing, breakpoints
  Importuj na górze każdego pliku CSS, który ich potrzebuje
*/

:root {
  /* Kolory główne */
  --color-primary: #007FFF;
  --color-primary-dark: #0066cc;
  --color-accent: #00a1ff;
  --color-bg: #212227;
  --color-bg-dark: #131212;
  --color-bg-light: #2a2b30;
  --color-footer-gradient-left: #0f0f11;
  --color-footer-gradient-right: #181820;
  --color-card: #1E1F22;
  --color-border: rgba(255,255,255,0.05);
  --color-border-strong: rgba(255,255,255,0.08);
  --color-shadow: rgba(0,0,0,0.2);
  --color-shadow-strong: rgba(0,0,0,0.3);
  --color-text: #ffffff;
  --color-text-muted: #b0b0b0;
  --color-text-light: rgba(255,255,255,0.7);
  --color-text-faded: rgba(255,255,255,0.5);
  --color-error: #ff4444;
  --color-error-dark: #cc0000;
  --color-success: #00c853;
  --color-warning: #ffcc00;
  --color-link: #007FFF;
  --color-link-hover: #4da3ff;

  /* Fonty */
  --font-main: 'Epilogue', Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 36px;
  --font-size-title: 48px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 80px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 50%;

  /* Breakpointy */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 767px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
}