:root {
    --primary-color: #1b8613; /* Modern teal blue */
    --secondary-color: #264653; /* Deep complementary shade */
    --highlight-color: #0249ad; /* Warm gold for accents */
    --danger-color: #E76F51; /* Soft coral red for warnings */

    --bg-color: #fff;
    --text-color: #000;

    --text-on-primary-color: #FFFFFF;

    --back-to-top-button-text-color: #ffffff;

    --nav-bar-background: #090f17;

    --footer-text-color: #999;

    --back-to-top-btn-color: #0249ad;
    --back-to-top-btn-hover-color:#02347a;

    /* Index colors */
    --match-list-background: #F4F4F9; /* Soft, almost white gray */
    --match-row-background: #FFFFFF; /* Clean white */
    --match-row-border: #E0E0E0; /* Subtle separator */
    --match-row-text: #333333; /* Dark gray for better readability */
    --match-info-row-text: #999999; /* Dark gray for better readability */
    --match-row-text-hover: #FFFFFF; /* White text on hover */
    --match-list-item-text: #555555; /* Mid-gray */
    --match-list-item-text-hover: #B3E1D1; /* Light teal highlight */
    
    --start-time-color: #333333;
    --current-time-color: #0249ad;

    --league-list-background: #F4F4F9;
    --league-country-header-background: #dddddd; /* Light gray */
    --league-country-header-border: #DDDDDD;
    --league-item-background: #FFFFFF;
    --league-item-border-selected: var(--primary-color);
    --league-item-border-selected-hover: var(--highlight-color);
    --league-item-border-unselected: #B4B4B4;
    --league-item-border-unselected-hover: var(--secondary-color);

    --warning-background: #f8db83; /* Softer yellow */
    --warning-border: #FFE39F; /* Light gold */
    --warning-text: #6F4E37; /* Brown for contrast */

    --select-all-button-hover-color: #1b8613;
    --select-none-button-hover-color: #0249ad;

    --statistics-icon-color: #0249ad;

    --dark-light-mode-icon-color: #dfe1e4;

    /* Match details colors */
    --container-background: #1A1A1A; /* Light gray background */
    --gray-line-background: #CCCCCC; /* Light gray for the line */
    --green-line-background: #27AE60; /* Soft green for the progress line */
    --time-line-background: #8E44AD; /* Purple for time markers */
    --event-line-background: #2C3E50; /* Dark slate blue for event markers */
    --tooltip-background: #FFFFFF; /* White for tooltips */
    --tooltip-text-color: #2C3E50; /* Dark slate blue for tooltip text */
    --team-name-color: #2C3E50;
    --half-time-score-text: #555555;
    --penalty-score-text: #999;
    --section-text: #555555;

    --home-bar-color: #4CAF50;
    --away-bar-color: #F44336;

    --section-container-background: #F4F4F9;
    --section-background: #FFFFFF;
    --line-color: #918b85;
    --extra-time-background: #59422b73;

    --pitch-color: #4FCDB9; 
    
    --matchdetails-tab-content-background: #f7f7f7;
    --matchdetails-nav-link-plus-text: #a1a1a1;
    --matchdetails-nav-link-plus-active-text: #555;
    --matchdetails-nav-link-plus-hover-text: #3d3d3d;

    --matchdetails-nav-link-plus-background: #ddd;
    --matchdetails-nav-link-plus-active-background: #f7f7f7;
    --matchdetails-nav-link-plus-hover-background: #cccccc;

    --team-name-prediction: #444;
    --team-home-prediction: var(--primary-color);
    --team-draw-prediction: #a1a1a1;
    --team-away-prediction: var(--highlight-color);

    --progress-bar-background: #dedede;

    /* Coverage */
    --country-text-hover: #FFFFFF;
    --country-list-background-color: #F4F4F9;
    --accordion-button-background: #fff;
    --accordion-button-text-color: #000;
    --accordion-button-selected-text-color: #fff;
    --accordion-button-hover-background-color: var(--primary-color);
    --accordion-button-border-color: #E0E0E0;
    --accordion-body-background-color: #b1b1b157;
    --accordion-body-text-color: #333333;
    --accordion-body-border-color: #dfdfdf;
    /* Not used yet*/
    --list-group-item-hover-background-color: #b60a0aad;
    --list-group-item-hover-text-color: #b60a0aad;
    --list-group-item-active-background-color: #b60a0aad;
    --list-group-item-active-text-color: #b60a0aad;

    /*Cookie banner and modal*/
    --cookie-banner-background-color:#090f17e3;
    --cookie-banner-text-color:#e2e2e2;
    --cookie-banner-button-color:#222;
    --cookie-banner-shadow-color:#0249ad23;

    --cookie-banner-accept-btn-background-color:#0249ad;
    --cookie-banner-accept-btn-background-hover-color:#02347a;
    --cookie-banner-accept-btn-color:#ffffff;

    --cookie-banner-reject-btn-color:#3a86f2;

    --cookie-modal-background-color: #fff;
    --cookie-modal-text-color: #000;

    --cookie-modal-accept-btn-background-color:#0249ad;
    --cookie-modal-accept-btn-background-hover-color:#02347a;
    --cookie-modal-accept-btn-color:#ffffff;
}

.dark-mode {
    --primary-color: #0249ad; /* Darker teal for a modern look */
    --secondary-color: #1B2C3A; /* Deeper shade for better contrast */
    --highlight-color: #1b8613; /* Rich gold for accents */
    --danger-color: #D1543F; /* Darker coral red for warnings */

    --bg-color: #121b25;
    --text-color: #d6d6d6;

    --back-to-top-button-text-color: #ffffff;

    --nav-bar-background: #090f17; /* Darkened blue for better contrast */

    --footer-text-color: #999;

    --back-to-top-btn-color: #1b8613;
    --back-to-top-btn-hover-color:#156e0f;

    /* Match List */
    --match-list-background: #181A1E; /* Dark charcoal gray */
    --match-row-background: #22252B; /* Darker gray for contrast */
    --match-row-border: #2F323A; /* Soft border for separation */
    --match-row-text: #E0E0E0; /* Lighter gray text */
    --match-info-row-text: #999999; /* Dark gray for better readability */
    --match-row-text-hover: #FFFFFF; /* White text on hover */
    --match-list-item-text: #BBBBBB; /* Softer gray */
    --match-list-item-text-hover: #cecfcf; /* Bright teal for contrast */

    --start-time-color: #E0E0E0; /* Lighter text for visibility */
    --current-time-color: #22b318; /* Vibrant pink for real-time highlights */

    /* League List */
    --league-list-background: #181A1E; /* Dark charcoal gray */
    --league-country-header-background: #24272D; /* Deep gray */
    --league-country-header-border: #30343B;
    --league-item-background: #1E2228; /* Slightly lighter than main background */
    --league-item-border-selected: var(--primary-color);
    --league-item-border-selected-hover: var(--highlight-color);
    --league-item-border-unselected: #555D66;
    --league-item-border-unselected-hover: var(--secondary-color);

    /* Warnings */
    --warning-background: #2B1F0C; /* Darker muted yellow */
    --warning-border: #B6893B; /* Richer gold */
    --warning-text: #C89F6A; /* Light brown for contrast */

    /* Buttons */
    --select-all-button-hover-color: #014ab1; /* Slightly darker green */
    --select-none-button-hover-color: #22b318; /* Deeper warm tone */
    
    --statistics-icon-color: #1b8613;

    --dark-light-mode-icon-color: #dfe1e4;
    
    /* Match details colors */
    --container-background: #1A1A1A; /* Light gray background */
    --gray-line-background: #CCCCCC; /* Light gray for the line */
    --green-line-background: #27AE60; /* Soft green for the progress line */
    --time-line-background: #8E44AD; /* Purple for time markers */
    --event-line-background: #2C3E50; /* Dark slate blue for event markers */
    --tooltip-background: #FFFFFF; /* White for tooltips */
    --tooltip-text-color: #2C3E50; /* Dark slate blue for tooltip text */
    --team-name-color: #bcd0e4;
    --half-time-score-text: #dfdfdf;
    --penalty-score-text: #999;
    --section-text: #e7e7e7;

    --home-bar-color: #4CAF50;
    --away-bar-color: #F44336;

    --section-container-background: #181A1E;
    --section-background: #22252B;
    --line-color: #918b85;
    --extra-time-background: #54b9548e;

    --pitch-color: #0249ad; 

    --matchdetails-tab-content-background: #22252B;
    --matchdetails-nav-link-plus-text: #c4c4c4;
    --matchdetails-nav-link-plus-active-text: #eeeeee;
    --matchdetails-nav-link-plus-hover-text: #a1a1a1;

    --matchdetails-nav-link-plus-background: #5e5e5e;
    --matchdetails-nav-link-plus-active-background: #222;
    --matchdetails-nav-link-plus-hover-background: #5e5e5e;

    --team-name-prediction: #ccc;
    --team-home-prediction: var(--primary-color);
    --team-draw-prediction: #a1a1a1;
    --team-away-prediction: var(--highlight-color);

    --progress-bar-background: #4c4c4c;

    /* Coverage */
    --country-text-hover: #FFFFFF;
    --country-list-background-color: #181A1E;
    --accordion-button-background: #22252B;
    --accordion-button-text-color: #E0E0E0;
    --accordion-button-selected-text-color: #fff;
    --accordion-button-hover-background-color: var(--primary-color);
    --accordion-button-border-color: #2F323A;
    --accordion-body-background-color: #30343B;
    --accordion-body-text-color: #dfdfdf;
    --accordion-body-border-color: #2e2e2e;
    /* Not used yet*/
    --list-group-item-hover-background-color: #b60a0aad;
    --list-group-item-hover-text-color: #b60a0aad;
    --list-group-item-active-background-color: #b60a0aad;
    --list-group-item-active-text-color: #b60a0aad;

    /*Cookie banner and modal*/
    --cookie-banner-background-color:#090f17e3;
    --cookie-banner-text-color:#e2e2e2;
    --cookie-banner-button-color:#222;
    --cookie-banner-shadow-color:#1b861323;

    --cookie-banner-accept-btn-background-color:#1b8613;
    --cookie-banner-accept-btn-background-hover-color:#156e0f;
    --cookie-banner-accept-btn-color:#ffffff;

    --cookie-banner-reject-btn-color:#1b8613;

    --cookie-modal-background-color: #22252b;
    --cookie-modal-text-color: #ffffff;

    --cookie-modal-accept-btn-background-color:#1b8613;
    --cookie-modal-accept-btn-background-hover-color:#156e0f;
    --cookie-modal-accept-btn-color:#ffffff;
}