@use 'sass:color';

$color-main: #ffbd00;
$color-danger: #ff2b6a;
$color-success: #3276b9;

// 2. Paleta odcieni szarości (inspirowana Tailwind CSS)
// Używamy jej do teł, ramek, tekstu i innych elementów interfejsu.
$white: #ffffff;
$gray-50: #f9fafb;
$gray-100: #f3f4f6;
$gray-200: #e5e7eb;
$gray-300: #d1d5db;
$gray-400: #9ca3af;
$gray-500: #6b7280;
$gray-600: #4b5563;
$gray-700: #374151;
$gray-800: #1f2937;
$gray-900: #111827;
$black: #000000;

:root {
  // Używamy interpolacji #{}, aby wstawić wartość zmiennej SCSS do zmiennej CSS
  --color-text-base: #{$gray-800};
  --color-text-lighter: #{$gray-700}; // Dla tekstu, który jest nieco jaśniejszy
  --color-text-muted: #{$gray-500};
  --color-text-muted-lighter: #{$gray-400}; // Dla mniej ważnych informacji, etykiet
  --color-text-inverted: #{$white};
  --color-bg-body: #{$white};
  --color-bg-body-rgb: #{color.channel($white, 'red')}, #{color.channel($white, 'green')}, #{color.channel($white, 'blue')};
  --color-bg-element: #{$gray-50};
  --color-bg-element-hover: #{$gray-100};
  --color-border: #{$gray-300};
  --color-border-focus: #{$color-main};
}

// 3. Kolory semantyczne (mapowanie palety na konkretne zastosowania)
// To jest BARDZO WAŻNA sekcja. Zamiast używać bezpośrednio np. `$gray-800` w kodzie,
// używamy zmiennych opisujących przeznaczenie koloru. Ułatwia to np. wprowadzenie trybu ciemnego w przyszłości.

// Kolory tekstu
$color-text-base: var(--color-text-base); // Podstawowy kolor tekstu
$color-text-lighter: var(--color-text-lighter); // Tekst, który jest nieco jaśniejszy (np. nagłówki)
$color-text-muted: var(--color-text-muted); // Kolor dla mniej ważnych informacji, etykiet
$color-text-muted-lighter: var(--color-text-muted-lighter); // Kolor dla jeszcze mniej ważnych informacji
$color-text-inverted: var(--color-text-inverted); // Kolor tekstu na ciemnym tle (np. na przyciskach)

// Kolory tła
$color-bg-body: var(--color-bg-body); // Tło całej strony
$color-bg-element: var(--color-bg-element); // Tło dla elementów takich jak karty, sekcje
$color-bg-element-hover: var(--color-bg-element-hover); // Tło dla elementów po najechaniu myszką

// Kolory ramek (borders)
$color-border: var(--color-border); // Kolor ramek dla inputów, kart itp.
$color-border-focus: var(--color-border-focus); // Kolor ramki aktywnego elementu