:root {
    --bg-light: #ffffff;
    --bg-dark: #1F133A;
   
    --hover-light: #F4A7C1;
    --hover-dark: #E86BA8; 

    --language-hover-light: #FFD6E3;
    --language-hover-dark: #C86A93;
  
    --text-light: #1F133A;
    --text-dark: #ffffff;

    --icon-light: #2c2c2e;
    --icon-dark: #f5f5f5;

    --border-light: #ccc;
    --border-dark: #5C4A72;

    --button-filter-light: #f06291;
    --button-filter-dark: #D85C87;

    --button-filter-hover-light: #EC407A;
    --button-filter-hover-dark: #ff72a1;

    --button-search-light: #8964ef;
    --button-search-dark: #9170ff;

    --button-search-hover-light: #7A4FE0;
    --button-search-hover-dark: #A88CFF;
  }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #c7cad5;
    color: var(--text-light);
    transition: background-color 0.5s, color 0.5s;
}

    body.dark-mode {
        background-color: #5C4A72;
        color: var(--text-dark);
    }

hr {
    border: none;
    height: 1px;
    background-color: #e0e0e0;
    margin: 10px 0;
}