/* Global Color Variables from Prototype */
:root {
    --primary-teal: #0B7A8F;
    --primary-green: #7AC143;
    --dark-text: #2C3E50;
    --light-bg: #F5F5F0;
    --white: #FFFFFF;
    --light-teal: #4A9AA8;
    --muted-teal: #5A7A80;
    --light-green: #8BCF4D;
    --soft-sage: #A8D5A8;
    --charcoal: #5A5A52;
    --gentle-gray: #E8E8E0;
}

/* Apply colors globally */
body {
    color: var(--dark-text);
    background: var(--light-bg);
}

/* Links */
a {
    color: var(--primary-teal);
    transition: color 0.3s;
}

a:hover {
    color: var(--primary-green);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text);
}

/* Buttons and CTAs */
.btn, button {
    background: var(--primary-teal);
    color: var(--white);
    transition: all 0.3s;
}

.btn:hover, button:hover {
    background: var(--primary-green);
}

/* Accent elements */
.accent-teal {
    color: var(--primary-teal);
}

.accent-green {
    color: var(--primary-green);
}

.bg-teal {
    background: var(--primary-teal);
}

.bg-green {
    background: var(--primary-green);
}

.bg-light {
    background: var(--light-bg);
}

.bg-white {
    background: var(--white);
}