/* Theme CSS Variables - Harmonious earth tones from updated STYLE_GUIDE.md */
:root {
    /* Warm, organic, professional color scheme */
    --color-background: #FAF8F5;           /* Warm cream background */
    --color-secondary-background: #F4EFE8;  /* Warm sand for cards */
    --color-primary: #1F5C63;              /* Deep teal for structure/navigation */
    --color-accent: #EE6352;                /* Pantone 2345 C orange for CTAs */
    --color-accent-hover: #D94F3F;         /* Darker orange for hover */
    --color-text: #2A2420;                 /* Rich dark brown for primary text */
    --color-text-secondary: #6B5D54;       /* Warm earth brown for secondary text */
    --color-text-muted: #6B5D54;          /* Warm earth brown for muted text */
    --color-border: #E8DFD3;               /* Light tan for borders */
    --color-tan-light: #E8DFD3;           /* Light tan for subtle backgrounds */
    --color-sand: #EDE7DF;                 /* Light mocha alternative background */
    --color-clay: #D4C4B6;                 /* Soft clay for muted accents */
    --color-sage: #5C7A5C;                 /* Sage green for success states */
}

/* Ensure cards use the theme colors */
.card {
    background-color: var(--color-background);
    color: var(--color-text);
}

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

/* Fix for section backgrounds */
.section-background {
    background-color: var(--color-background);
}

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