/* ==========================================================================
   Dynamic Utility Classes for Theme-Aware Styling
   These classes use CSS variables defined in app.css
   ========================================================================== */

/* Background Colors */
.bg-dynamic-primary {
    background-color: var(--color-bg-primary);
}

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

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

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

/* Text Colors */
.text-dynamic-primary {
    color: var(--color-text-primary);
}

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

.text-dynamic-tertiary {
    color: var(--color-text-tertiary);
}

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

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

/* Border Colors */
.border-dynamic {
    border-color: var(--color-border-default);
}

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

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

/* Header-specific dynamic classes */
.bg-dynamic-header {
    background-color: var(--color-header-bg);
}

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

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

.text-dynamic-header-secondary {
    color: var(--color-header-text-secondary);
}

/* Footer-specific dynamic classes */
.bg-dynamic-footer {
    background-color: var(--color-footer-bg);
}

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

.text-dynamic-footer {
    color: var(--color-footer-text);
}

/* Hover States */
.hover\:bg-dynamic-tertiary:hover {
    background-color: var(--color-bg-tertiary);
}

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

.hover\:text-dynamic-header-primary:hover {
    color: var(--color-header-text);
}

.hover\:text-dynamic-footer-hover:hover {
    color: var(--color-footer-text-hover);
}

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

.hover\:border-dynamic-accent:hover {
    border-color: var(--color-accent-border);
}

/* Shadows */
.shadow-dynamic-sm {
    box-shadow: 0 1px 2px var(--color-shadow);
}

.shadow-dynamic {
    box-shadow: 0 1px 3px var(--color-shadow);
}

.shadow-dynamic-md {
    box-shadow: 0 4px 6px var(--color-shadow-md);
}

.shadow-dynamic-lg {
    box-shadow: 0 10px 15px var(--color-shadow-lg);
}

.hover\:shadow-dynamic-lg:hover {
    box-shadow: 0 10px 15px var(--color-shadow-lg);
}

/* ==========================================================================
   Combined Utility Classes (Common Patterns)
   ========================================================================== */

/* Card base styling */
.card-dynamic {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
}

.card-dynamic:hover {
    border-color: var(--color-accent-border);
    box-shadow: 0 10px 15px var(--color-shadow-lg);
}

/* Link styling */
.link-dynamic {
    color: var(--color-text-secondary);
    text-decoration: none;
}

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

/* Button variant */
.btn-dynamic-outline {
    background-color: transparent;
    border: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
}

.btn-dynamic-outline:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-accent-border);
}

/* Accent button */
.btn-dynamic-accent {
    background-color: var(--color-accent);
    color: var(--color-accent-text, #ffffff);
    border: 1px solid var(--color-accent);
}

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

/* Featured/highlighted elements */
.featured-dynamic {
    background-color: var(--color-accent-light);
    border: 2px solid var(--color-accent-border);
}

/* Breadcrumb/navigation */
.breadcrumb-dynamic {
    color: var(--color-text-tertiary);
}

.breadcrumb-dynamic-active {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* Image adjustments for dark mode */
[data-theme='dark'] img {
    filter: brightness(0.9);
}

[data-theme='dark'] img:hover {
    filter: brightness(1);
}