:root {
  /* Typography */
  --font-family: Roboto, sans-serif;
  --title-family: "Barlow Condensed", serif;
  --font-size-base: 16px;
  --font-size-4xl: 3rem;
  --font-size-xxxl: 2.5rem;
  --font-size-xxl: 2rem;
  --font-size-xl: 1.5rem;
  --font-size-l: 1.25rem;
  --font-size-m: 1rem;
  --font-size-s: 0.85rem;
  --font-size-xs: 0.5rem;
  --line-height-base: 1.6;
  --line-height-heading: 1;

  --max-width: 800px;

  /* Spacing */
  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-s: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-l: 2rem;
  --spacing-xl: 3rem;

  /* Border Radius */
  --border-radius: 8px;

  /* Shadows */
  --shadow-default: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-image: 0 3px 12px -1px rgba(7, 10, 25, 0.2), 0 22px 27px -20px rgba(7, 10, 25, 0.2);

    /* Primary Colors */
  --primary-900: #1A2139; /* Najciemniejszy odcień */
  --primary-800: #272F4F; /* Główny kolor tekstu */
  --primary-700: #2F3A5C;
  --primary-600: #3A4870;
  --primary-500: #4C5A8B;
  --primary-400: #6573A2; /* Kolor linków */
  --primary-300: #8994BA;
  --primary-200: #B2BCE0;
  --primary-100: #E1E6F3;

  /* Accent Colors */
  --accent-500: #FF6B6B; /* Intensywny czerwony (akcenty, błędy) */
  --accent-400: #FF8787;

  /* Base Colors */
  --color-main: var(--primary-800); /* Główny kolor tekstu */
  --color-main-lighter: var(--primary-200); /* Jaśniejszy kolor tekstu */
  --white: #FFFFFF;
  --dark: var(--primary-900);

  /* Background Colors */
  --bg-color: var(--white); /* Kolor tła */
  --bg-color-tov: #F7F8F9; /* Tło delikatnie szare */
  --bg-section: #F7F8F9; /* Tło dla różnych sekcji */

  --bg-header-footer: var(--primary-100); /* Tło nagłówków i stopek */

  --bg-table-header: var(--primary-100); /* Tło nagłówka tabeli */
  --bg-table-row-even: #F8F9FC; /* Równe wiersze tabeli */
  --bg-table-row-odd: var(--white); /* Nierówne wiersze tabeli */

  --bg-blockquote: #E9ECF2; /* Tło cytatów */

  /* Link Colors */
  --link-color: var(--primary-400); /* Kolor linków */
  --link-hover: var(--primary-600); /* Kolor linków po najechaniu */

  /* Tags */
  --tag-bg: var(--primary-600); /* Tło tagów */
  --tag-text: var(--primary-100); /* Tekst tagów */
  --tag-bg-hover: var(--primary-700); /* Tło tagów po najechaniu */
  --tag-text-hover: var(--white); /* Tekst tagów po najechaniu */

  /* Alert Colors */
  --alert-info-bg: #E3F2FD;
  --alert-info-text: #0D47A1;
  --alert-warning-bg: #FFF3E0;
  --alert-warning-text: #E65100;
  --alert-error-bg: #FFEBEE;
  --alert-error-text: #C62828;

  /* Button Colors */
  --btn-primary: var(--primary-600); /* Główny przycisk */
  --btn-primary-hover: var(--primary-700); /* Główny przycisk po najechaniu */
  --btn-secondary: var(--primary-200); /* Drugi przycisk */
  --btn-secondary-hover: var(--primary-300); /* Drugi przycisk po najechaniu */
  --btn-tertiary: transparent; /* Trzeci przycisk */
  --btn-tertiary-hover: var(--primary-100); /* Trzeci przycisk po najechaniu */

  /* Selection */
  --selection-bg: var(--primary-200); /* Tło zaznaczenia */
  --selection-text: var(--primary-900); /* Tekst zaznaczenia */

  /* HR */
  --hr-color: var(--primary-100); /* Kolor linii poziomej */

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(39, 47, 79, 0.1); /* Cień mały */
  --shadow-md: 0 4px 6px rgba(39, 47, 79, 0.15); /* Cień średni */
  --shadow-lg: 0 10px 15px rgba(39, 47, 79, 0.2); /* Cień duży */

  /* Border Colors */
  --border-color-light: var(--primary-100); /* Jasne obramowanie */
  --border-color: var(--primary-200); /* Standardowe obramowanie */
  --border-color-heavy: var(--primary-400); /* Mocne obramowanie */
}