/* Dynamic Theme CSS - Applied via JavaScript */
/* This file contains the base structure for dynamic theming */

/* CSS Custom Properties that will be updated dynamically */
:root {
    /* Default theme colors - will be overridden by JavaScript */
    --theme-primary: #d4af37;
    --theme-secondary: #8b7355;
    --theme-background: #faf9f7;
    --theme-text: #2c2c2c;
    
    /* Derived colors for better theming */
    --theme-primary-light: color-mix(in srgb, var(--theme-primary) 80%, white);
    --theme-primary-dark: color-mix(in srgb, var(--theme-primary) 80%, black);
    --theme-secondary-light: color-mix(in srgb, var(--theme-secondary) 80%, white);
    --theme-text-light: color-mix(in srgb, var(--theme-text) 60%, var(--theme-background));
}

/* Apply theme colors to key elements */
body {
    background-color: var(--theme-background) !important;
    color: var(--theme-text) !important;
}

/* Accent colors */
.accent-gold,
.countdown-text,
.wedding-date {
    color: var(--theme-primary) !important;
}

/* Buttons */
.submit-btn,
.btn-primary,
.upload-option-btn {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)) !important;
    border-color: var(--theme-primary) !important;
}

.submit-btn:hover,
.btn-primary:hover,
.upload-option-btn:hover {
    background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary)) !important;
    border-color: var(--theme-primary-dark) !important;
}

/* Secondary elements */
.date-decoration .decoration-dot,
.privacy-decoration .decoration-dot {
    background-color: var(--theme-primary) !important;
}

.date-decoration .date-line,
.privacy-decoration .decoration-line {
    background-color: var(--theme-secondary) !important;
}

/* Form elements */
.form-input:focus,
.form-textarea:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 20%, transparent) !important;
}

/* Links */
.nav-link {
    color: var(--theme-primary) !important;
}

.nav-link:hover {
    color: var(--theme-primary-dark) !important;
}

/* Admin button */
.admin-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 15%, transparent), color-mix(in srgb, var(--theme-primary) 5%, transparent)) !important;
    border-color: color-mix(in srgb, var(--theme-primary) 40%, transparent) !important;
    color: var(--theme-primary) !important;
}

.admin-btn:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 25%, transparent), color-mix(in srgb, var(--theme-primary) 10%, transparent)) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-secondary) !important;
}

/* Gallery elements */
.photo-item {
    border-color: var(--theme-secondary) !important;
}

/* Theme meta tag for mobile browsers */
meta[name="theme-color"] {
    content: var(--theme-primary);
}

/* Fallback for browsers that don't support color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
    :root {
        --theme-primary-light: #e6d470;
        --theme-primary-dark: #b8942d;
        --theme-secondary-light: #a68a6b;
        --theme-text-light: #6b6b6b;
    }
}