/* 
 * Global Color Theme Variables - Olive & Earth Tone Palette
 * Only the colors specified in the design system
 */

:root {
    /* PRIMARY BRAND COLOR */
    --primary-color: #7B8A5A;
    /* Herbal olive - main brand color */

    /* SUPPORTING GREENS - Use for hover states, icons, small highlights */
    --forest-olive: #5F6B46;
    /* Forest Olive - hover states, icons, highlights */
    --soft-leaf: #9EAA7A;
    /* Soft leaf - hover states, icons, highlights */

    /* BACKGROUND COLORS */
    --bg-main: #F5F3EE;
    /* Warm Linen - Main Background */
    --bg-section: #E8E3D7;
    /* Sand Beige - Section Background */
    --bg-card: #FFFFFF;
    /* Pure White - Card/Content Background */
    --bg-header: #F5F3EE;
    /* Header Background */
    --bg-footer: #3A4230;
    /* Footer Background */

    /* TEXT COLORS */
    --text-main: #2E2E2C;
    /* Charcoal Earth - Main Text */
    --text-secondary: #6F6F6A;
    /* Warm Gray - Secondary Text */
    --text-header: #2E2E2C;
    /* Header Logo/Text */
    --text-footer: #E8E3D7;
    /* Footer Text */
    --text-white: #FFFFFF;
    /* White text */

    /* HEADER */
    --header-active: #7B8A5A;
    /* Active Menu Item */

    /* FOOTER */
    --footer-link-hover: #9EAA7A;
    /* Footer Links Hover */

    /* BUTTON SYSTEM */
    /* Primary Button */
    --btn-primary-bg: #7B8A5A;
    /* Primary Button Background */
    --btn-primary-text: #FFFFFF;
    /* Primary Button Text */
    --btn-primary-hover: #6A784C;
    /* Primary Button Hover */

    /* Secondary Button */
    --btn-secondary-bg: transparent;
    /* Secondary Button Background */
    --btn-secondary-text: #7B8A5A;
    /* Secondary Button Text */
    --btn-secondary-hover: #E8E3D7;
    /* Secondary Button Hover */
}

/* UTILITY CLASSES */

/* Background Colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

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

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

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

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

/* Text Colors */
.text-primary {
    color: var(--primary-color) !important;
}

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

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

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

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

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

/* Hover States */
.hover\:bg-primary:hover {
    background-color: var(--primary-color) !important;
}

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

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

.hover\:text-soft-leaf:hover {
    color: var(--soft-leaf) !important;
}

/* Border Colors */
.border-primary {
    border-color: var(--primary-color) !important;
}

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

/* Gradient Background */
.bg-gradient-primary {
    background: linear-gradient(135deg, rgba(123, 138, 90, 0.9), rgba(95, 107, 70, 0.9));
}

/* BUTTON SYSTEM */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    transition: all 0.3s ease;
}

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

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 2px solid var(--primary-color);
    transition: all 0.3s ease;
}

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

/* Icon Colors */
.icon-primary {
    color: var(--primary-color);
}

.icon-forest-olive {
    color: var(--forest-olive);
}

.icon-soft-leaf {
    color: var(--soft-leaf);
}

/* Active Menu Item */
.menu-active {
    color: var(--header-active) !important;
    border-bottom-color: var(--header-active) !important;
}

/* Footer Link Hover */
.footer-link:hover {
    color: var(--footer-link-hover) !important;
}