/* ============================================
   THEMES BASE - Common Variables and Rules
   ============================================ */

/* Common theme variables structure */
:root {
    /* These will be overridden by specific themes */
    --theme-bg-primary: #FFFFFF;
    --theme-bg-secondary: #F5F5F5;
    --theme-text-primary: #000000;
    --theme-text-secondary: #333333;
    --theme-accent: #DC143C;
    --theme-accent-dark: #B71C1C;
    --theme-border: #000000;
    --theme-card-bg: #FFFFFF;
    --theme-hero-bg: #000000;
    --theme-hero-text: #FFFFFF;
    --theme-footer-bg: #F5F5F5;
}

/* Apply theme colors to body */
body {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

/* Header theme */
.header {
    background-color: var(--theme-bg-primary);
    border-bottom-color: var(--theme-border);
    border-top-color: var(--theme-accent);
}

/* Hero theme */
.hero {
    background-color: var(--theme-hero-bg);
    border-bottom-color: var(--theme-accent);
    border-top-color: var(--theme-accent);
}

.hero h1 {
    color: var(--theme-hero-text);
}

.hero-description {
    color: var(--theme-hero-text);
}

.hero-subtitle {
    color: var(--theme-hero-text);
    background-color: transparent;
    border-color: var(--theme-hero-text);
}

/* Ensure hero has correct background */
.hero {
    background-color: var(--theme-hero-bg) !important;
}

/* Cards theme */
.card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-border);
}

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

/* Footer theme */
.footer {
    background-color: var(--theme-bg-secondary);
    border-top-color: var(--theme-accent);
    border-bottom-color: var(--theme-accent);
    color: var(--theme-text-primary);
}

.footer-section a {
    color: var(--theme-text-primary);
}

.footer-section a:hover {
    color: var(--theme-accent);
}

.footer-bottom {
    color: var(--theme-text-primary);
    border-top-color: var(--theme-border);
}

/* Section titles */
.section-title::after {
    background-color: var(--theme-accent);
}

/* Buttons */
.btn {
    border-color: var(--theme-border);
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

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

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

.btn-primary:hover {
    background-color: var(--theme-accent-dark);
    color: var(--color-white);
}

/* Nav links */
.nav-link {
    color: var(--theme-text-primary);
}

.nav-link:hover {
    color: var(--theme-accent);
    border-bottom-color: var(--theme-accent);
    background-color: transparent;
}

.nav-link.active {
    background-color: var(--theme-accent);
    color: var(--color-white);
    border-bottom-color: var(--theme-border);
}

/* Social links */
.social-link {
    border-color: var(--theme-text-primary);
}

.social-link svg {
    fill: var(--theme-text-primary);
}

.social-link:hover {
    background-color: var(--theme-accent);
    border-color: var(--theme-accent);
}

.social-link:hover svg {
    fill: var(--color-white);
}

/* Section backgrounds */
.features-section {
    background-color: var(--theme-bg-secondary);
}