/* Site-wide theme overrides loaded after page CSS.
   Scoped to shared website layouts only; invitation/template render pages do not add .site-light-mode. */

body.site-light-mode {
    --site-bg: #f7f2e8;
    --site-surface: #fffaf1;
    --site-surface-strong: #ffffff;
    --site-surface-muted: #f1e9dc;
    --site-text: #201b14;
    --site-text-soft: rgba(32,27,20,0.72);
    --site-text-muted: rgba(32,27,20,0.54);
    --site-text-faint: rgba(32,27,20,0.38);
    --site-border: rgba(70,53,25,0.16);
    --site-border-strong: rgba(70,53,25,0.26);
    --site-gold: #8a6813;
    --site-gold-soft: rgba(201,162,39,0.16);
    --site-shadow: 0 18px 45px rgba(80,61,30,0.12);
    background: var(--site-bg) !important;
    color: var(--site-text) !important;
}

body.site-light-mode .site-nav,
body.site-light-mode .site-nav.scrolled,
body.site-light-mode .site-footer,
body.site-light-mode .nav-links,
body.site-light-mode.dashboard-body,
body.site-light-mode .dashboard-main,
body.site-light-mode .dashboard-content,
body.site-light-mode .dashboard-topbar,
body.site-light-mode .sidebar,
body.site-light-mode .auth-page,
body.site-light-mode .auth-panel-right,
body.site-light-mode .features,
body.site-light-mode .templates-showcase,
body.site-light-mode .pricing,
body.site-light-mode .how-it-works,
body.site-light-mode .faq,
body.site-light-mode .testimonials,
body.site-light-mode .cta,
body.site-light-mode .features-section,
body.site-light-mode .templates-section,
body.site-light-mode .how-section,
body.site-light-mode .pricing-section,
body.site-light-mode .custom-request-section {
    background: var(--site-bg) !important;
    color: var(--site-text) !important;
}

body.site-light-mode .sidebar,
body.site-light-mode .dashboard-topbar,
body.site-light-mode .site-footer,
body.site-light-mode .sidebar-header,
body.site-light-mode .sidebar-user,
body.site-light-mode .footer-copy {
    border-color: var(--site-border) !important;
}

body.site-light-mode .brand-text,
body.site-light-mode .sidebar-brand-text,
body.site-light-mode .sidebar-user-name,
body.site-light-mode .topbar-title,
body.site-light-mode .dash-welcome-title,
body.site-light-mode .dash-section-title,
body.site-light-mode .dash-page-title,
body.site-light-mode .dash-card-title,
body.site-light-mode .stat-number,
body.site-light-mode .inv-card-names,
body.site-light-mode .template-name,
body.site-light-mode .design-gallery-body h3,
body.site-light-mode .auth-form-title,
body.site-light-mode .auth-panel-content,
body.site-light-mode .hero-title,
body.site-light-mode .section-title,
body.site-light-mode .feature-title,
body.site-light-mode .template-title,
body.site-light-mode .pricing-card-title,
body.site-light-mode .pricing-price,
body.site-light-mode .builder-card-title,
body.site-light-mode .component-order-name,
body.site-light-mode .tier-avail-name,
body.site-light-mode .accordion-title,
body.site-light-mode .payment-summary-title,
body.site-light-mode .checkout-title,
body.site-light-mode .td-name,
body.site-light-mode .pricing-plan-name,
body.site-light-mode .how-step-title,
body.site-light-mode .template-showcase-name,
body.site-light-mode .custom-request-copy .section-title {
    color: var(--site-text) !important;
}

body.site-light-mode .nav-links a,
body.site-light-mode .nav-btn-outline,
body.site-light-mode .footer-links a,
body.site-light-mode .footer-brand p,
body.site-light-mode .footer-copy p,
body.site-light-mode .sidebar-link,
body.site-light-mode .sidebar-link-btn,
body.site-light-mode .sidebar-section-label,
body.site-light-mode .sidebar-user-role,
body.site-light-mode .topbar-menu-btn,
body.site-light-mode .dash-welcome-sub,
body.site-light-mode .stat-label,
body.site-light-mode .dash-empty-text,
body.site-light-mode .inv-card-meta span,
body.site-light-mode .inv-stat,
body.site-light-mode .inv-tier-expiry,
body.site-light-mode .dash-tier-label,
body.site-light-mode .dash-tier-label small,
body.site-light-mode .template-desc,
body.site-light-mode .design-gallery-body p,
body.site-light-mode .design-gallery-meta,
body.site-light-mode .dash-table td,
body.site-light-mode .td-muted,
body.site-light-mode .dash-back-btn,
body.site-light-mode .auth-form-subtitle,
body.site-light-mode .auth-panel-subtitle,
body.site-light-mode .auth-panel-features li,
body.site-light-mode .hero-subtitle,
body.site-light-mode .hero-stat-label,
body.site-light-mode .section-subtitle,
body.site-light-mode .feature-desc,
body.site-light-mode .pricing-feature,
body.site-light-mode .char-counter,
body.site-light-mode .media-upload-placeholder span,
body.site-light-mode .media-upload-placeholder small,
body.site-light-mode .music-preview span,
body.site-light-mode .preview-panel-header,
body.site-light-mode .preview-badge,
body.site-light-mode .prev-detail-row,
body.site-light-mode .prev-message,
body.site-light-mode .preview-share-label,
body.site-light-mode .preview-template-tag,
body.site-light-mode .preview-frame-url,
body.site-light-mode .preview-overlay-content,
body.site-light-mode .tier-avail-desc,
body.site-light-mode .component-order-desc,
body.site-light-mode .component-order-drag,
body.site-light-mode .order-summary-item,
body.site-light-mode .ai-card-subtitle,
body.site-light-mode .ai-muted,
body.site-light-mode .form-hint,
body.site-light-mode .payment-muted {
    color: var(--site-text-muted) !important;
}

body.site-light-mode .pricing-plan-desc,
body.site-light-mode .pricing-period,
body.site-light-mode .pricing-features li,
body.site-light-mode .pricing-note,
body.site-light-mode .how-step-desc,
body.site-light-mode .template-showcase-desc,
body.site-light-mode .template-empty-state,
body.site-light-mode .custom-request-copy .section-subtitle,
body.site-light-mode .custom-form-group label,
body.site-light-mode .custom-form-group input::placeholder,
body.site-light-mode .custom-form-group textarea::placeholder {
    color: var(--site-text-muted) !important;
}

body.site-light-mode .nav-links a:hover,
body.site-light-mode .nav-btn-outline:hover,
body.site-light-mode .footer-links a:hover,
body.site-light-mode .sidebar-link:hover,
body.site-light-mode .sidebar-link-btn:hover,
body.site-light-mode .dash-section-action,
body.site-light-mode .gold,
body.site-light-mode .brand-accent,
body.site-light-mode .sidebar-brand-accent,
body.site-light-mode .hero-title-gold,
body.site-light-mode .hero-title-script,
body.site-light-mode .hero-stat-num,
body.site-light-mode .feature-icon,
body.site-light-mode .template-selected-mark,
body.site-light-mode .prev-couple-names,
body.site-light-mode .prev-detail-row i,
body.site-light-mode .preview-share-url,
body.site-light-mode .preview-copy-btn:hover,
body.site-light-mode .preview-copy-btn-bar,
body.site-light-mode .component-order-icon,
body.site-light-mode .tier-avail-card input:checked + .tier-avail-inner .tier-avail-name,
body.site-light-mode .order-summary-item i,
body.site-light-mode .pricing-currency,
body.site-light-mode .pricing-price,
body.site-light-mode .template-showcase-tag,
body.site-light-mode .template-showcase-tier,
body.site-light-mode .how-step-num,
body.site-light-mode .how-step-arrow,
body.site-light-mode .section-eyebrow,
body.site-light-mode .hero-eyebrow,
body.site-light-mode .cta-title-gold {
    color: var(--site-gold) !important;
}

body.site-light-mode .dash-card,
body.site-light-mode .stat-card,
body.site-light-mode .dash-empty,
body.site-light-mode .inv-card,
body.site-light-mode .inv-share-menu,
body.site-light-mode .inv-share-url-row,
body.site-light-mode .inv-share-qr,
body.site-light-mode .template-card,
body.site-light-mode .design-gallery-card,
body.site-light-mode .dashboard-select,
body.site-light-mode .dash-table-wrapper,
body.site-light-mode .dash-table thead tr,
body.site-light-mode .settings-toggle-row,
body.site-light-mode .builder-card,
body.site-light-mode .builder-card-header,
body.site-light-mode .media-upload-zone,
body.site-light-mode .preview-panel-sticky,
body.site-light-mode .preview-panel-header,
body.site-light-mode .preview-device-frame,
body.site-light-mode .preview-status-bar,
body.site-light-mode .preview-frame-wrapper,
body.site-light-mode .preview-frame-header,
body.site-light-mode .preview-frame-overlay,
body.site-light-mode .preview-share-url,
body.site-light-mode .tier-avail-inner,
body.site-light-mode .component-order-item,
body.site-light-mode .template-order-summary,
body.site-light-mode .admin-filter,
body.site-light-mode .admin-filter-row,
body.site-light-mode .admin-table-wrapper,
body.site-light-mode .admin-action-btn,
body.site-light-mode .admin-pagination a,
body.site-light-mode .admin-pagination span,
body.site-light-mode .payment-summary-card,
body.site-light-mode .payment-method-card,
body.site-light-mode .checkout-card,
body.site-light-mode .share-channel,
body.site-light-mode .accordion-item,
body.site-light-mode .accordion-body,
body.site-light-mode .ai-card,
body.site-light-mode .ai-generator-card,
body.site-light-mode .ai-result-card,
body.site-light-mode .feature-card,
body.site-light-mode .how-step,
body.site-light-mode .pricing-card,
body.site-light-mode .template-showcase-card,
body.site-light-mode .template-carousel-card,
body.site-light-mode .template-showcase-info,
body.site-light-mode .custom-request-form,
body.site-light-mode .form-input:not(.theme-lock *),
body.site-light-mode .form-select:not(.theme-lock *),
body.site-light-mode .dashboard-select,
body.site-light-mode .admin-select,
body.site-light-mode .tier-dropdown {
    background: var(--site-surface) !important;
    border-color: var(--site-border) !important;
    color: var(--site-text) !important;
}

body.site-light-mode .stat-card:hover,
body.site-light-mode .inv-card:hover,
body.site-light-mode .template-card:hover,
body.site-light-mode .design-gallery-card:hover,
body.site-light-mode .builder-card:focus-within,
body.site-light-mode .payment-method-card:hover,
body.site-light-mode .admin-action-btn:hover {
    border-color: rgba(201,162,39,0.34) !important;
    box-shadow: var(--site-shadow) !important;
}

body.site-light-mode .feature-card:hover,
body.site-light-mode .template-showcase-card:hover,
body.site-light-mode .pricing-card-featured {
    border-color: rgba(201,162,39,0.42) !important;
    box-shadow: var(--site-shadow) !important;
}

body.site-light-mode .sidebar-link:hover,
body.site-light-mode .sidebar-link-btn:hover,
body.site-light-mode .dash-table-row:hover,
body.site-light-mode .inv-action-btn:hover,
body.site-light-mode .inv-share-option:hover,
body.site-light-mode .component-order-item:hover,
body.site-light-mode .tier-avail-card:hover .tier-avail-inner {
    background: rgba(201,162,39,0.09) !important;
}

body.site-light-mode .sidebar-link.active,
body.site-light-mode .inv-tier-label,
body.site-light-mode .preview-copy-btn-bar,
body.site-light-mode .dash-filter-btn,
body.site-light-mode .template-card.selected,
body.site-light-mode .tier-avail-card input:checked + .tier-avail-inner,
body.site-light-mode .component-order-icon,
body.site-light-mode .badge-featured,
body.site-light-mode .pricing-badge {
    background: var(--site-gold-soft) !important;
    border-color: rgba(201,162,39,0.34) !important;
    color: var(--site-gold) !important;
}

body.site-light-mode .template-empty-state,
body.site-light-mode .hero-eyebrow {
    background: rgba(255,255,255,0.38) !important;
    border-color: rgba(201,162,39,0.28) !important;
}

body.site-light-mode .template-mock-header {
    background: linear-gradient(135deg, #fff3d2, #efe3c9) !important;
}

body.site-light-mode .template-mock-date {
    color: var(--site-text-muted) !important;
}

body.site-light-mode .template-carousel::before {
    background: linear-gradient(90deg, var(--site-bg), transparent) !important;
}

body.site-light-mode .template-carousel::after {
    background: linear-gradient(270deg, var(--site-bg), transparent) !important;
}

body.site-light-mode .hero-stat-divider,
body.site-light-mode .features-section,
body.site-light-mode .templates-section,
body.site-light-mode .how-section,
body.site-light-mode .pricing-section,
body.site-light-mode .custom-request-section {
    border-color: var(--site-border) !important;
}

body.site-light-mode .custom-form-group input,
body.site-light-mode .custom-form-group select,
body.site-light-mode .custom-form-group textarea {
    background: var(--site-surface-strong) !important;
    border-color: var(--site-border-strong) !important;
    color: var(--site-text) !important;
}

body.site-light-mode .custom-request-success {
    background: rgba(39,174,96,0.12) !important;
    border-color: rgba(39,174,96,0.28) !important;
    color: #247a49 !important;
}

body.site-light-mode .inv-action-btn,
body.site-light-mode .inv-share-menu-close,
body.site-light-mode .inv-share-copy,
body.site-light-mode .inv-share-option,
body.site-light-mode .btn-builder-preview,
body.site-light-mode .preview-edit-btn,
body.site-light-mode .dash-filter-reset,
body.site-light-mode .btn-auth-secondary,
body.site-light-mode .btn-auth-google,
body.site-light-mode .nav-btn-outline,
body.site-light-mode .admin-action-btn,
body.site-light-mode .payment-secondary-btn {
    background: var(--site-surface-strong) !important;
    border-color: var(--site-border-strong) !important;
    color: var(--site-text-soft) !important;
}

body.site-light-mode .form-label:not(.theme-lock *),
body.site-light-mode label:not(.theme-lock *),
body.site-light-mode .form-checkbox-text:not(.theme-lock *),
body.site-light-mode .settings-toggle-row strong,
body.site-light-mode .dash-table th,
body.site-light-mode .component-order-name,
body.site-light-mode .tier-avail-name {
    color: var(--site-text-soft) !important;
}

body.site-light-mode .ai-panel {
    background: linear-gradient(135deg, #fffaf1, #f5eddd) !important;
    border-color: rgba(201,162,39,0.28) !important;
    box-shadow: var(--site-shadow) !important;
}

body.site-light-mode .ai-panel-subtitle,
body.site-light-mode .ai-examples-label,
body.site-light-mode .ai-progress-step,
body.site-light-mode .swatch-label,
body.site-light-mode .design-template-tiers,
body.site-light-mode .template-editor-layout p,
body.site-light-mode .builder-card-header p,
body.site-light-mode .builder-card-title span:not(.component-count-badge):not(.gold),
body.site-light-mode .media-upload-zone div[style*="color:rgba(255,255,255"],
body.site-light-mode #templatePickerGrid div[style*="color:rgba(255,255,255"] {
    color: var(--site-text-muted) !important;
}

body.site-light-mode .ai-progress-step {
    background: var(--site-surface-strong) !important;
    border-color: var(--site-border) !important;
}

body.site-light-mode .ai-progress-step.active {
    background: var(--site-gold-soft) !important;
    border-color: rgba(201,162,39,0.34) !important;
    color: var(--site-gold) !important;
}

body.site-light-mode .ai-progress-step.done {
    background: rgba(39,174,96,0.1) !important;
    border-color: rgba(39,174,96,0.24) !important;
    color: #247a49 !important;
}

body.site-light-mode .ai-example-chip,
body.site-light-mode .component-count-badge {
    background: var(--site-gold-soft) !important;
    border-color: rgba(201,162,39,0.34) !important;
    color: var(--site-gold) !important;
}

body.site-light-mode .design-template-card {
    background: var(--site-surface-strong) !important;
    border-color: var(--site-border) !important;
}

body.site-light-mode .design-template-thumb {
    background: linear-gradient(135deg, #f1e9dc, #fffaf1) !important;
}

body.site-light-mode .design-template-name,
body.site-light-mode .accordion-header,
body.site-light-mode .accordion-header-left > span:first-of-type,
body.site-light-mode .param-label,
body.site-light-mode .param-label-toggle {
    color: var(--site-text-soft) !important;
}

body.site-light-mode .accordion-desc,
body.site-light-mode .accordion-chevron {
    color: var(--site-text-muted) !important;
}

body.site-light-mode .accordion-header {
    background: var(--site-surface-strong) !important;
}

body.site-light-mode .accordion-header:hover {
    background: rgba(201,162,39,0.09) !important;
}

body.site-light-mode .accordion-body {
    background: #fffdf8 !important;
    border-top-color: var(--site-border) !important;
}

body.site-light-mode .param-input,
body.site-light-mode .param-select,
body.site-light-mode .color-input-wrapper input[type="color"] {
    background: var(--site-surface-strong) !important;
    border-color: var(--site-border-strong) !important;
    color: var(--site-text) !important;
}

body.site-light-mode .param-select option {
    background: #ffffff !important;
    color: var(--site-text) !important;
}

body.site-light-mode .param-input:focus,
body.site-light-mode .param-select:focus {
    border-color: rgba(201,162,39,0.58) !important;
    box-shadow: 0 0 0 3px rgba(201,162,39,0.14) !important;
}

body.site-light-mode .color-preview,
body.site-light-mode .color-swatch {
    border-color: var(--site-border-strong) !important;
}

body.site-light-mode .preview-color-swatches,
body.site-light-mode .template-order-summary,
body.site-light-mode .preview-panel-sticky > div[style*="border-top"] {
    border-top-color: var(--site-border) !important;
}

body.site-light-mode .toggle-slider {
    background: rgba(32,27,20,0.2) !important;
}

body.site-light-mode .toggle-slider::before {
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(32,27,20,0.22) !important;
}

body.site-light-mode .form-input:not(.theme-lock *)::placeholder,
body.site-light-mode .param-input::placeholder,
body.site-light-mode .builder-textarea:not(.theme-lock *)::placeholder {
    color: var(--site-text-faint) !important;
}

body.site-light-mode .hero-bg {
    background: radial-gradient(ellipse at 30% 50%, #fff4d9 0%, var(--site-bg) 62%), radial-gradient(ellipse at 70% 50%, #eee9ff 0%, transparent 60%) !important;
}

body.site-light-mode .hero-overlay {
    background: linear-gradient(to bottom, transparent 60%, var(--site-bg) 100%) !important;
}

body.site-light-mode .auth-panel-left {
    background: linear-gradient(135deg, #fff2d1 0%, #f8df9d 50%, #fff7e4 100%) !important;
}

body.site-light-mode .auth-panel-left::before {
    background: radial-gradient(ellipse at 20% 50%, rgba(201,162,39,0.22) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(130,100,20,0.1) 0%, transparent 60%) !important;
}

body.site-light-mode .template-real-preview,
body.site-light-mode .template-live-preview-shell,
body.site-light-mode .preview-iframe,
body.site-light-mode .preview-frame-body iframe,
body.site-light-mode iframe.preview-iframe {
    background: #0d0d0d !important;
}

body.site-light-mode .nav-toggle span {
    background: var(--site-text) !important;
}

body.site-light-mode .theme-switcher-button {
    background: rgba(255,255,255,0.92) !important;
    border-color: var(--site-border-strong) !important;
    color: var(--site-text) !important;
}