:root {
  /* 🎨 Kolory */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-link-text: #3e68ff;
  --color-border: #f5f5f5;
  --color-border-dark: #d4d4d4;
  --color-border-secondary: #ededed;
  --color-border-black: #000000;
  --color-menu-hover: #fafafa;
  --color-bg-items: #fafafa;
  --color-error-red: #d00e17;
  --color-success-green: #54c63a;

  --btn-bg: #000000;
  --btn-bg-hover: #222222;
  --btn-text: #ffffff;
  --btn-outline-bg: #ffffff;
  --btn-outline-bg-hover: #f7f7f7;
  --btn-secondary-bg: #ededed;
  --btn-secondary-bg-hover: #e4e4e4;
  --btn-secondary-text: #000000;
  --color-star-active: #000000;
  --color-star-inactive: rgba(0, 0, 0, 0.15);

  /* 🔘 Przyciski */
  --btn-height: 42px;
  --btn-padding-x: var(--space-6);
  --btn-radius: var(--radius-pill);
  --btn-font-size: var(--font-size-lg);
  --btn-font-weight: var(--font-weight-semibold);
  --btn-border-width: 1px;
  --btn-border-color: var(--color-border-black);
  --btn-secondary-border-color: var(--color-border-secondary);
  --btn-outline-text: var(--color-text);
  --btn-outline-border-color: var(--color-border-black);
  --btn-focus-ring: rgba(0, 0, 0, 0.2);

  --btn-icon-size: var(--btn-height);
  --btn-height-sm: 44px;
  --btn-padding-x-sm: var(--space-5);
  --btn-font-size-sm: var(--font-size-md);
  --btn-height-lg: 60px;
  --btn-padding-x-lg: var(--space-7);
  --btn-font-size-lg: var(--font-size-xl);
  --btn-icon-size-sm: var(--btn-height-sm);
  --btn-icon-size-lg: var(--btn-height-lg);

  /* 📏 Formularze: domyślna wysokość inputów */
  --input-height: var(--btn-height);
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-3);
  --input-radius: var(--radius-md);
  --input-font-size: var(--font-size-md);
  --input-font-weight: var(--font-weight-normal);
  --input-border-width: 1px;
  --input-border-color: var(--color-border);
  --input-border-color-focus: var(--color-border-black);
  --input-bg: var(--color-bg);
  --input-text: var(--color-text);
  --input-focus-ring: rgba(0, 0, 0, 0.15);

  /* 🔢 Ilość (quantity control) */
  --qty-bg: transparent;
  --qty-border-color: var(--color-border-secondary);

  /* 🌗 Dark Mode (przykładowe – aktywowane klasą .dark w przyszłości) */
  --color-bg-dark: #000000;
  --color-text-dark: #ffffff;
  --color-border-darkmode: #2e2e2e;
  --color-bg-items-dark: #1e1e1e;

  /* 🔠 Typografia */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-xxl: 28px;
  --font-size-display: 66px;
  --font-size-logo: 21px;
  --section-heading-size: 44px;
  --section-heading-weight: var(--font-weight-bold);

  --font-weight-normal: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;

  /* 📏 Spacing: Modularna siatka (4px) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 100px;
  --space-11: 100px;

  /* 📦 Zaokrąglenia */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 26px;
  --radius-pill: 9999px;
  --product-tile-button-height: var(--btn-icon-size);

  /* 🧱 Grid / szerokości */
  --max-width-container: 1444px;
  --container-padding: var(--space-4);

  --font-size-md-mobile: 13px;
  --font-size-lg-mobile: 15px;
  --font-size-display-mobile: 24px;
}

@media (max-width: 767px) {
  :root {
    --font-size-md: var(--font-size-md-mobile);
    --font-size-lg: var(--font-size-lg-mobile);
    --font-size-display: var(--font-size-display-mobile);
    --section-heading-size: 24px;
  }
}