:root {
    /* Primary Color */
    --primary-color: #1F8843; /* Green */
    --primary-hover: #AFFF7B; /* Light Green (Hover) */
    --primary-active: #78BA53; /* Darker Green (Active) */

    /* Secondary Colors */
    --secondary-color: #D9D9D9; /* Light Gray */
    --secondary-dark: #000000; /* Black */

    /* Text Colors */
    --text-on-primary: #FFFFFF; /* White text for primary background */
    --text-on-secondary: #000000; /* Black text for secondary background */
    --text-on-dark: #FFFFFF; /* White text for dark background */

    /* Background Colors */
    --background-light: #FFFFFF; /* White */
    --background-dark: #000000; /* Black */

    /* Border Colors */
    --border-light: #D9D9D9; /* Light Gray */
    --border-dark: #000000; /* Black */
}

/* Example Usage */
.button-primary {
    background-color: var(--primary-color);
    color: var(--text-on-primary);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-primary:hover {
    background-color: var(--primary-hover);
}

.button-primary:active {
    background-color: var(--primary-active);
}

.button-secondary {
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
    border: 1px solid var(--border-dark);
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-secondary:hover {
    background-color: var(--secondary-dark);
    color: var(--text-on-dark);
}