/* Vivid Garden — colorful demo theme with stronger contrast */

[data-theme="vivid-garden"] body {
    color: var(--color-text);
}

[data-theme="vivid-garden"] .site-header {
    border-bottom: 2px solid var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

[data-theme="vivid-garden"] .logo-text small {
    color: var(--color-primary);
    font-weight: 700;
}

[data-theme="vivid-garden"] .nav-links a:not(.btn) {
    color: var(--color-text);
    font-weight: 600;
}

[data-theme="vivid-garden"] .nav-links a:not(.btn):hover {
    color: var(--color-primary);
}

[data-theme="vivid-garden"] .lang-switch {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #92400e !important;
}

[data-theme="vivid-garden"] .hero {
    background: var(--hero-bg);
    border-bottom: 2px solid var(--color-border-strong);
}

[data-theme="vivid-garden"] .badge {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
    font-weight: 700;
}

[data-theme="vivid-garden"] .hero h1 em,
[data-theme="vivid-garden"] .supply-num,
[data-theme="vivid-garden"] .hero-stats strong {
    color: var(--color-primary);
}

[data-theme="vivid-garden"] .hero-lead,
[data-theme="vivid-garden"] .section-header p,
[data-theme="vivid-garden"] .section-lead,
[data-theme="vivid-garden"] .supply-step p,
[data-theme="vivid-garden"] .audience-card p,
[data-theme="vivid-garden"] .about-card p,
[data-theme="vivid-garden"] .step p {
    color: var(--color-text-muted);
    font-weight: 500;
}

[data-theme="vivid-garden"] .hero-stats li {
    border: 2px solid var(--color-border-strong);
    background: #ffffff;
}

[data-theme="vivid-garden"] .hero-stats li:nth-child(2) strong {
    color: var(--accent-warm);
}

[data-theme="vivid-garden"] .hero-stats li:nth-child(3) strong {
    color: var(--accent-gold);
}

[data-theme="vivid-garden"] .btn-primary {
    background: linear-gradient(135deg, #0f766e 0%, #059669 100%);
    border: 1px solid #047857;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28);
}

[data-theme="vivid-garden"] .btn-primary:hover {
    background: linear-gradient(135deg, #0d5f59 0%, #047857 100%);
}

[data-theme="vivid-garden"] .btn-outline {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: #ffffff;
    font-weight: 700;
}

[data-theme="vivid-garden"] .section-alt {
    background: linear-gradient(180deg, #f3faf4 0%, #ecfdf5 100%);
}

[data-theme="vivid-garden"] .section-header h2,
[data-theme="vivid-garden"] .about-card h3,
[data-theme="vivid-garden"] .supply-step h3,
[data-theme="vivid-garden"] .audience-card h3,
[data-theme="vivid-garden"] .step h3,
[data-theme="vivid-garden"] .franchise-card h3,
[data-theme="vivid-garden"] .roles-card h3 {
    color: var(--color-heading);
}

[data-theme="vivid-garden"] .about-card,
[data-theme="vivid-garden"] .supply-step,
[data-theme="vivid-garden"] .audience-card,
[data-theme="vivid-garden"] .step,
[data-theme="vivid-garden"] .card,
[data-theme="vivid-garden"] .endorsement-profile,
[data-theme="vivid-garden"] .endorsement-body,
[data-theme="vivid-garden"] .franchise-card,
[data-theme="vivid-garden"] .roles-card,
[data-theme="vivid-garden"] .package-item {
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

[data-theme="vivid-garden"] .about-card {
    border-top: 4px solid var(--color-primary);
}

[data-theme="vivid-garden"] .about-card:nth-child(2) {
    border-top-color: var(--accent-warm);
}

[data-theme="vivid-garden"] .about-card:nth-child(3) {
    border-top-color: var(--accent-gold);
}

[data-theme="vivid-garden"] .about-icon {
    font-size: 1.85rem;
}

[data-theme="vivid-garden"] .supply-num {
    background: var(--color-primary-light);
    border: 1px solid var(--color-border-strong);
}

[data-theme="vivid-garden"] .supply-flow-icon {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #b45309;
}

[data-theme="vivid-garden"] .franchise-points li,
[data-theme="vivid-garden"] .register-checklist li {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: var(--color-heading);
    font-weight: 600;
}

[data-theme="vivid-garden"] .roles-card-you {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #34d399;
}

[data-theme="vivid-garden"] .package-item {
    background: #ffffff;
}

[data-theme="vivid-garden"] .package-check {
    color: var(--color-primary);
    font-weight: 800;
}

[data-theme="vivid-garden"] .step-num {
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 800;
}

[data-theme="vivid-garden"] .section-register {
    background: linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%);
}

[data-theme="vivid-garden"] .site-footer {
    border-top: 3px solid var(--color-border-strong);
}

[data-theme="vivid-garden"] .footer-grid h3,
[data-theme="vivid-garden"] .footer-grid h4,
[data-theme="vivid-garden"] .footer-registration strong {
    color: var(--color-footer-heading);
}

[data-theme="vivid-garden"] .footer-grid p,
[data-theme="vivid-garden"] .footer-address,
[data-theme="vivid-garden"] .footer-website {
    color: var(--color-footer-text);
    font-weight: 500;
}

/* Demo banner */
.theme-demo-banner {
    position: sticky;
    top: 0;
    z-index: 110;
    background: linear-gradient(90deg, #0f766e 0%, #059669 50%, #ca8a04 100%);
    color: #ffffff;
    border-bottom: 2px solid #047857;
    box-shadow: 0 4px 16px rgba(11, 61, 46, 0.2);
}

.theme-demo-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 1rem;
    padding: 0.65rem 0;
    font-size: 0.88rem;
}

.theme-demo-banner strong {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.theme-demo-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
}

.theme-demo-link:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.theme-demo-link.is-active {
    background: #ffffff;
    color: #0f766e;
    border-color: #ffffff;
}

body.theme-demo-page .site-header {
    top: 0;
}

@media (max-width: 720px) {
    .theme-demo-banner-inner {
        justify-content: center;
        text-align: center;
    }
}