/* ================================
   THEME COLOR SYSTEM
   Light Theme Only
   ================================ */

/* ================================
   LIGHT THEME (Default)
   ================================ */

:root {
    /* Background Colors */
    --color-bg: #FFFFFF;
    --color-bg-secondary: #F8F9FA;
    --color-bg-tertiary: #F1F3F5;

    /* Text Colors */
    --color-text: #212529;
    --color-text-muted: #6C757D;
    --color-text-light: #ADB5BD;

    /* Accent Colors - Sage Green inspired by Brandon Lee */
    --color-accent: #98BF92;
    --color-accent-dark: #7BA675;
    --color-accent-light: #C8E6C9;

    /* Border Colors */
    --color-border: #DEE2E6;
    --color-border-light: #E9ECEF;

    /* State Colors */
    --color-success: #51CF66;
    --color-warning: #FCC419;
    --color-error: #FF6B6B;
    --color-info: #4DABF7;

    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* ================================
   SMOOTH TRANSITIONS
   ================================ */

body,
.header,
.mobile-menu,
.footer,
.marquee-container,
button,
a {
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
                color 300ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
   ACCESSIBILITY - HIGH CONTRAST
   ================================ */

@media (prefers-contrast: high) {
    :root {
        --color-text: #000000;
        --color-bg: #FFFFFF;
        --color-border: #000000;
    }
}

/* ================================
   CUSTOM THEME UTILITY CLASSES
   ================================ */

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

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

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

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

.text-muted {
    color: var(--color-text-muted);
}

.text-accent {
    color: var(--color-accent);
}

.border-color {
    border-color: var(--color-border);
}

/* ================================
   GRADIENT BACKGROUNDS
   ================================ */

.gradient-accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

.gradient-bg {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
}

/* ================================
   SEMANTIC COLORS
   ================================ */

.success {
    color: var(--color-success);
}

.warning {
    color: var(--color-warning);
}

.error {
    color: var(--color-error);
}

.info {
    color: var(--color-info);
}

/* ================================
   THEME-SPECIFIC IMAGE FILTERS
   ================================ */

[data-theme="dark"] img:not(.no-filter) {
    opacity: 0.9;
    transition: opacity 300ms;
}

[data-theme="dark"] img:not(.no-filter):hover {
    opacity: 1;
}