:root {
  --font-size: 16px;

  /* Design System Colors */
  --ds-primary: #111111; /* deeper black for modern look */
  --ds-primary-rgb: 17, 17, 17;
  --ds-accent: #111111; /* subtle accent, maybe black/gray */
  --ds-accent-rgb: 17, 17, 17;
  --ds-accent-hover: #333333;
  --ds-light: #f5f5f5; /* slightly softer light background */
  --ds-dark-gray: #333333;
  --ds-medium-gray: #777777; /* subtle gray */
  --ds-light-gray: #e5e5e5;
  --ds-accent-gradient: linear-gradient(50deg, #333333 0%, #111111 100%);

  /* Borders */
  --ds-border: #e0e0e0;

  /* Border Radius System - uproszczony */
  --ds-radius-button: 4px; /* Zaokrąglenie pigułkowe (pill) dla przycisków */
  --ds-radius-md: 8px; /* Globalne, uniwersalne zaokrąglenie */

  /* Spacing System */
  --ds-space-1: 4px;
  --ds-space-2: 12px;
  --ds-space-3: 24px;
  --ds-space-4: 32px;
  --ds-space-5: 40px;
  --ds-space-6: 48px;
  --ds-space-8: 64px;
  --ds-space-10: 80px;
  --ds-space-12: 96px;
  --ds-space-16: 128px;
  --ds-space-32: 256px;

  /* Typography Scale */
  --ds-text-hero-desktop: 80px;
  --ds-text-hero-tablet: 56px;
  --ds-text-hero-mobile: 40px;
  --ds-text-h1-desktop: 40px;
  --ds-text-h1-tablet: 32px;
  --ds-text-h1-mobile: 28px;
  --ds-text-h2: 28px;
  --ds-text-h3: 20px;
  --ds-text-body: 15px;
  --ds-text-small: 13px;
  --ds-text-xsmall: 11px;

  /* Grid System */
  --ds-gutter-desktop: 24px;
  --ds-gutter-tablet: 16px;
  --ds-gutter-mobile: 12px;

  /* Animation */
  --ds-duration-fast: 200ms;
  --ds-duration-medium: 400ms;
  --ds-duration-slow: 600ms;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
}