/* ========== Colors ========== */
:root {
    --primary-color: #CB202D;
    --secondary-color: #ffffff;
    --secondary-color-b: #f8dcdc;
    --accent-color: #F2A20C;
    --dark-color: #222;
    --light-color: #F5F5F5;
    --text-color: #333;
    --white: #fff;
    --social-color: #118ce9;
    --black: rgb(0, 0, 0);
    --footer-header: rgb(255, 249, 249);
}

/* ========== Background Colors ========== */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-dark { background-color: var(--dark-color); }
.bg-light { background-color: var(--light-color); }

/* ========== Text Colors ========== */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-dark { color: var(--dark-color); }
.text-light { color: var(--light-color); }
.text-white { color: var(--white); }

/* ========== Font Sizes ========== */
.text-sm { font-size: 14px; }
.text-md { font-size: 16px; }
.text-lg { font-size: 20px; }
.text-xl { font-size: 24px; }
.text-2xl { font-size: 30px; }

/* ========== Font Weight ========== */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

/* ========== Buttons ========== */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    font-weight: 600;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

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

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
}

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

.btn-accent {
    background-color: var(--accent-color);
    color: var(--white);
}

.btn-accent:hover {
    background-color: var(--secondary-color);
}

/* ========== Utility Classes ========== */
.container { max-width: 1200px; margin: auto; padding: 20px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }