/* variables.css */
:root {
    --background-color: #262626;
    --text-color: #FFFFFF;
    --shadow-default: 0px 0px 7px 0px rgba(0, 0, 0, 1);

    --primary-color: #28a745;  
    --accent-color: #28a745;   
    --red-color: #ff0000;
    --secondary-color: #141414;
    --footer-bg: #092930;
    --slider-background: #44475a;

    /* Używamy koloru dominującego do slidera, przycisku, itp. */
    --slider-thumb-color: var(--primary-color);
    --slider-thumb-hover-color: #1e7c37;
    --slider-thumb-shadow: rgba(40, 167, 69, 0.6);
    --slider-thumb-hover-shadow: rgba(30, 124, 55, 0.8);
    --slider-thumb-active-shadow: rgba(30, 124, 55, 0.9);

    --secondary-info-color: #CCCCCC;
    --slider-limits-color: #BBBBBB;
    --navbar-bg-color: #262626;
    --calculator-bg: #15272d;
    --calculator-limits-color: #CCCCCC;
    --calculator-info-text: #FFFFFF;

    /* Guzik domyślnie zielony */
    --btn-background-color: var(--primary-color);
    --btn-text-color: #FFFFFF;
    --btn-hover-background-color: #1e7c37;

    --footer-text-color: #FFFFFF;

    --inactive-color: #ccc;
    --line-color: #fff;
    --step-background: #fff;

    --multi-step-bg: #15272d;
    --multi-step-h3-h2: #fff;
    --multi-step-form-text: #fff;
    --multi-step-form-bg: #131a1f;
    --multi-step-form-border: #343a40;
    --multi-step-form-placeholder: #6c757d;

    --author-border: #fff;

    --card-bg: var(--calculator-bg);
    --card-text: var(--calculator-info-text);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    --card-shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.55);
    --card-ring: rgba(40, 167, 69, 0.35);
    --featured-ring: rgba(40, 167, 69, 0.55);
    --featured-badge-bg: linear-gradient(135deg, #2bb24f, #45c975);
    --featured-badge-text: #0b1a10;

    --bs-border-radius-lg: 1.5rem;

    /* Benefits section (default = tryb ciemny) */
    --benefits-bg: #ffffff; /* białe tło w trybie ciemnym */
    --benefits-text: #000000; /* czarny tekst w trybie ciemnym */
}

/* ========== Dla trybu jasnego ========== */
.light-mode {
    --background-color: #FFFFFF;
    --text-color: #000000;
    --shadow-default: transparent;

    /* Również tu rozdzielamy na primary (zielony) i accent (fiolet) */
    --primary-color: #28a745;  
    --accent-color: #28a745; 

    --secondary-color: #F0F0F0;
    --footer-bg: #092930;
    --slider-background: #D3D3D3;
    --slider-thumb-color: var(--primary-color);
    --slider-thumb-hover-color: #1e7c37;
    --slider-thumb-shadow: rgba(40, 167, 69, 0.6);
    --slider-thumb-hover-shadow: rgba(30, 124, 55, 0.8);
    --slider-thumb-active-shadow: rgba(30, 124, 55, 0.9);

    --secondary-info-color: #333333;
    --slider-limits-color: #333333;
    --navbar-bg-color: #F8F9FA;
    --calculator-bg: #F8F9FA;
    --calculator-limits-color: #666666;
    --calculator-info-text: #000000;

    --btn-background-color: var(--primary-color);
    --btn-text-color: #000;
    --btn-hover-background-color: #1e7c37;

    --footer-text-color: #FFFFFF;

    --inactive-color: #000000;
    --line-color: #000000;
    --step-background: #fff;

    --multi-step-bg: #ffffff;
    --multi-step-h3-h2: #000000;
    --multi-step-form-text: #000000;
    --multi-step-form-bg: #ffffff;
    --multi-step-form-border: #343a40;
    --multi-step-form-placeholder: #6c757d;

    --author-border: #000;

    --card-bg: var(--calculator-bg);
    --card-text: var(--calculator-info-text);
    --card-border: rgba(0, 0, 0, 0.06);
    --card-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    --card-shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.16);
    --card-ring: rgba(40, 167, 69, 0.25);
    --featured-ring: rgba(40, 167, 69, 0.35);
    --featured-badge-bg: linear-gradient(135deg, #2bb24f, #45c975);
    --featured-badge-text: #083318;

    /* Benefits section (tryb jasny) – dopasowane do reszty strony */
    --benefits-bg: var(--background-color); /* tło jak ogólne tło strony (białe domyślnie) */
    --benefits-text: var(--text-color);      /* tekst jak ogólny kolor tekstu (czarny domyślnie) */
}