:root {
    /* Kolory */
                                        --primary-color: #000000;
                                                --secondary-color: #0d6efd;
                                                --success-color: #198754;
                                                --danger-color: #dc3545;
                                                --warning-color: #ffc107;
                                                --info-color: #0dcaf0;
                                                --dark-color: #212529;
                                                --light-color: #f8f9fa;
                                                --body-bg: #ffffff;
                                                --text-color: #212529;
                                                --link-color: #8c0000;
                                                --link-hover-color: #6a0000;
                        
    /* Typografia */
                                                            --font-family-base: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
                                                                                    --font-family-headings: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
                                                                                    --font-size-base: 16px;
                                                                                    --line-height-base: 1.6;
                                                                                    --h1-size: 2.5rem;
                                                                                    --h2-size: 2rem;
                                                                                    --h3-size: 1.75rem;
                                                                                    --h4-size: 1.5rem;
                                                                                    --h5-size: 1.25rem;
                                                                                    --h6-size: 1rem;
                                        
    /* Layout */
                                                            --container-width: 1200px;
                                                                                    --border-radius: 8px;
                                                                                    --section-padding-y: 60px;
                                                                                    --section-padding-x: 15px;
                                                                                    --card-shadow: 0 2px 8px rgba(0,0,0,0.1);
                                                                                    --transition-speed: 0.3s;
                                        
    /* Komponenty */
                                                            --button-radius: 8px;
                                                                                    --button-padding-y: 10px;
                                                                                    --button-padding-x: 10px;
                                                                                    --input-radius: 10px;
                                                                                    --input-border-color: #ced4da;
                                                                                    --card-radius: 10px;
                                        
    /* Top-bar */
                                        --topbar-bg: #000000;
                                                --topbar-text: #ffffff;
                                                --topbar-link: #ffffff;
                                                --topbar-link-hover: #ffffff;
                        
    /* Nawigacja */
                                        --nav-bg: #ffffff;
                                                --nav-text: #212529;
                                                --nav-link: #495057;
                                                --nav-link-hover: #000000;
                                                --nav-border: #dee2e6;
                        
    /* Stopka */
                                        --footer-bg: #000000;
                                                --footer-text: #ffffff;
                                                --footer-heading: #ffffff;
                                                --footer-link: #adb5bd;
                                                --footer-link-hover: #ffffff;
                            }

    /* Aplikuj zmienne do elementów */
    body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--body-bg);
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    }

    h1 { font-size: var(--h1-size); }
    h2 { font-size: var(--h2-size); }
    h3 { font-size: var(--h3-size); }
    h4 { font-size: var(--h4-size); }
    h5 { font-size: var(--h5-size); }
    h6 { font-size: var(--h6-size); }

    a {
    color: var(--link-color);
    transition: color var(--transition-speed, 0.3s) ease;
    }

    a:hover {
    color: var(--link-hover-color);
    }

    .container {
    max-width: var(--container-width);
    }

    /* Przyciski - tylko nadpisuj gdy zmienne są ustawione */
    .btn-primary {
            background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
                border-radius: var(--button-radius);
                padding: var(--button-padding-y, 0.375rem) var(--button-padding-x, 0.75rem);
        }

    .btn-primary:hover {
            background-color: var(--link-hover-color) !important;
        border-color: var(--link-hover-color) !important;
        }

    .btn-secondary {
            background-color: var(--secondary-color) !important;
        border-color: var(--secondary-color) !important;
                border-radius: var(--button-radius);
                padding: var(--button-padding-y, 0.375rem) var(--button-padding-x, 0.75rem);
        }

    .btn {
            border-radius: var(--button-radius);
        transition: all var(--transition-speed, 0.3s) ease;
    }

    .card {
    border-radius: var(--card-radius, var(--border-radius));
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-speed, 0.3s) ease;
    }

    .form-control, .form-select {
    border-radius: var(--input-radius);
    border-color: var(--input-border-color);
    }

    .form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb, 140, 0, 0), 0.25);
    }

    section {
    padding: var(--section-padding-y) var(--section-padding-x);
    }

    .bg-primary {
    background-color: var(--primary-color) !important;
    }

    .bg-secondary {
    background-color: var(--secondary-color) !important;
    }

    .text-primary {
    color: var(--primary-color) !important;
    }

    .text-secondary {
    color: var(--secondary-color) !important;
    }

    .border-primary {
    border-color: var(--primary-color) !important;
    }

    /* Top-bar */
    .top-bar {
    background-color: var(--topbar-bg) !important;
    color: var(--topbar-text) !important;
    }

    .top-bar span,
    .top-bar span i {
    color: var(--topbar-text) !important;
    }

    .top-bar a {
    color: var(--topbar-link) !important;
    }

    .top-bar a:hover {
    color: var(--topbar-link-hover) !important;
    }

    /* Nawigacja */
    .navbar {
    background-color: var(--nav-bg) !important;
    border-bottom: 1px solid var(--nav-border) !important;
    }

    .navbar .navbar-brand,
    .navbar .nav-link {
    color: var(--nav-link) !important;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
    color: var(--nav-link-hover) !important;
    }

    /* Stopka / Footer */
    .footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
    }

    .footer h5 {
    color: var(--footer-heading) !important;
    }

    .footer a {
    color: var(--footer-link) !important;
    }

    .footer a:hover {
    color: var(--footer-link-hover) !important;
    }

    .footer-social a:hover {
    background-color: var(--footer-link-hover) !important;
    color: white !important;
    }

    /* Własny CSS użytkownika */