/* Element UI aligned design tokens */
:root,
html[data-theme="light"] {
    color-scheme: light;

    --el-color-primary: #409EFF;
    --el-color-primary-light-3: #79bbff;
    --el-color-primary-light-5: #a0cfff;
    --el-color-primary-light-7: #c6e2ff;
    --el-color-primary-light-8: #d9ecff;
    --el-color-primary-light-9: #ecf5ff;
    --el-color-primary-dark-2: #337ecc;
    --el-color-success: #67C23A;
    --el-color-success-light-3: #95d475;
    --el-color-success-light-9: #f0f9eb;
    --el-color-warning: #E6A23C;
    --el-color-warning-light-3: #eebe77;
    --el-color-warning-light-9: #fdf6ec;
    --el-color-danger: #F56C6C;
    --el-color-danger-light-9: #fef0f0;
    --el-color-info: #909399;
    --el-color-info-light-9: #f4f4f5;

    --el-text-color-primary: #303133;
    --el-text-color-regular: #606266;
    --el-text-color-secondary: #909399;
    --el-text-color-placeholder: #A8ABB2;
    --el-border-color: #DCDFE6;
    --el-border-color-light: #E4E7ED;
    --el-border-color-lighter: #EBEEF5;
    --el-fill-color-blank: #FFFFFF;
    --el-fill-color-light: #F5F7FA;
    --el-bg-color: #FFFFFF;
    --el-bg-color-page: #F2F3F5;
    --el-bg-color-overlay: #FFFFFF;
    --el-mask-color: rgba(0, 0, 0, 0.5);

    --primary: var(--el-color-primary);
    --primary-light: var(--el-color-primary-light-3);
    --accent: var(--el-color-primary-light-3);
    --text: var(--el-text-color-primary);
    --text-light: var(--el-text-color-secondary);

    --saas-text: var(--el-text-color-primary);
    --saas-text-muted: var(--el-text-color-secondary);
    --saas-border: var(--el-border-color-light);
    --saas-surface: var(--el-bg-color);
    --saas-surface-muted: var(--el-fill-color-light);
    --saas-hero: var(--el-color-primary-light-9);
    --saas-focus-ring: var(--el-color-primary-alpha-12);

    --el-color-primary-alpha-06: rgba(64, 158, 255, 0.06);
    --el-color-primary-alpha-08: rgba(64, 158, 255, 0.08);
    --el-color-primary-alpha-10: rgba(64, 158, 255, 0.1);
    --el-color-primary-alpha-12: rgba(64, 158, 255, 0.12);
    --el-color-primary-alpha-14: rgba(64, 158, 255, 0.14);
    --el-color-primary-alpha-15: rgba(64, 158, 255, 0.15);
    --el-color-primary-alpha-16: rgba(64, 158, 255, 0.16);
    --el-color-primary-alpha-18: rgba(64, 158, 255, 0.18);
    --el-color-primary-alpha-20: rgba(64, 158, 255, 0.2);
    --el-color-primary-alpha-22: rgba(64, 158, 255, 0.22);
    --el-color-primary-alpha-25: rgba(64, 158, 255, 0.25);
    --el-color-primary-alpha-28: rgba(64, 158, 255, 0.28);
    --el-color-primary-alpha-30: rgba(64, 158, 255, 0.3);
    --el-color-primary-alpha-32: rgba(64, 158, 255, 0.32);
    --el-color-primary-alpha-34: rgba(64, 158, 255, 0.34);
    --el-color-primary-alpha-35: rgba(64, 158, 255, 0.35);
    --el-color-primary-alpha-38: rgba(64, 158, 255, 0.38);
    --el-color-primary-alpha-40: rgba(64, 158, 255, 0.4);
    --el-color-primary-alpha-45: rgba(64, 158, 255, 0.45);
    --el-color-primary-alpha-50: rgba(64, 158, 255, 0.5);
    --el-color-success-alpha-35: rgba(103, 194, 58, 0.35);
    --el-color-success-alpha-45: rgba(103, 194, 58, 0.45);
}

html[data-theme="dark"] {
    color-scheme: dark;

    --el-color-primary: #409EFF;
    --el-color-primary-light-3: #66b1ff;
    --el-color-primary-light-5: #409EFF;
    --el-color-primary-light-7: #3375b9;
    --el-color-primary-light-8: #2d5986;
    --el-color-primary-light-9: #18222c;
    --el-color-primary-dark-2: #337ecc;
    --el-color-success: #67C23A;
    --el-color-success-light-3: #85ce61;
    --el-color-success-light-9: #1f2a1a;
    --el-color-warning: #E6A23C;
    --el-color-warning-light-3: #eebe77;
    --el-color-warning-light-9: #2b2418;
    --el-color-danger: #F56C6C;
    --el-color-danger-light-9: #2b1d1d;
    --el-color-info: #909399;
    --el-color-info-light-9: #202121;

    --el-text-color-primary: #E5EAF3;
    --el-text-color-regular: #CFD3DC;
    --el-text-color-secondary: #A3A6AD;
    --el-text-color-placeholder: #8D9095;
    --el-border-color: #4C4D4F;
    --el-border-color-light: #414243;
    --el-border-color-lighter: #363637;
    --el-fill-color-blank: #141414;
    --el-fill-color-light: #1D1E1F;
    --el-bg-color: #1D1E1F;
    --el-bg-color-page: #0A0A0A;
    --el-bg-color-overlay: #1D1E1F;
    --el-mask-color: rgba(0, 0, 0, 0.7);

    --primary: var(--el-color-primary);
    --primary-light: var(--el-color-primary-light-3);
    --accent: var(--el-color-primary-light-3);
    --text: var(--el-text-color-primary);
    --text-light: var(--el-text-color-secondary);

    --saas-text: var(--el-text-color-primary);
    --saas-text-muted: var(--el-text-color-secondary);
    --saas-border: var(--el-border-color);
    --saas-surface: var(--el-bg-color);
    --saas-surface-muted: var(--el-fill-color-light);
    --saas-hero: var(--el-bg-color-page);
    --saas-focus-ring: var(--el-color-primary-alpha-24);

    --el-color-primary-alpha-06: rgba(64, 158, 255, 0.08);
    --el-color-primary-alpha-08: rgba(64, 158, 255, 0.1);
    --el-color-primary-alpha-10: rgba(64, 158, 255, 0.12);
    --el-color-primary-alpha-12: rgba(64, 158, 255, 0.16);
    --el-color-primary-alpha-14: rgba(64, 158, 255, 0.18);
    --el-color-primary-alpha-15: rgba(64, 158, 255, 0.2);
    --el-color-primary-alpha-16: rgba(64, 158, 255, 0.2);
    --el-color-primary-alpha-18: rgba(64, 158, 255, 0.22);
    --el-color-primary-alpha-20: rgba(64, 158, 255, 0.24);
    --el-color-primary-alpha-22: rgba(64, 158, 255, 0.26);
    --el-color-primary-alpha-24: rgba(64, 158, 255, 0.24);
    --el-color-primary-alpha-25: rgba(64, 158, 255, 0.28);
    --el-color-primary-alpha-28: rgba(64, 158, 255, 0.3);
    --el-color-primary-alpha-30: rgba(64, 158, 255, 0.32);
    --el-color-primary-alpha-32: rgba(64, 158, 255, 0.34);
    --el-color-primary-alpha-34: rgba(64, 158, 255, 0.36);
    --el-color-primary-alpha-35: rgba(64, 158, 255, 0.38);
    --el-color-primary-alpha-38: rgba(64, 158, 255, 0.4);
    --el-color-primary-alpha-40: rgba(64, 158, 255, 0.42);
    --el-color-primary-alpha-45: rgba(64, 158, 255, 0.48);
    --el-color-primary-alpha-50: rgba(64, 158, 255, 0.55);
    --el-color-success-alpha-35: rgba(103, 194, 58, 0.4);
    --el-color-success-alpha-45: rgba(103, 194, 58, 0.5);
}

/* Site background accents (dark mode only; light mode keeps main.css defaults) */
html[data-theme="dark"] body.site-body {
    background: #0a0a0a;
}

html[data-theme="dark"] .site-bg {
    background: linear-gradient(135deg, #0a0a0a 0%, #141414 40%, #18222c 70%, #0a0a0a 100%);
}

html[data-theme="dark"] .site-bg::before {
    background: #3375b9;
    opacity: 0.35;
}

html[data-theme="dark"] .site-bg::after {
    background: #409EFF;
    opacity: 0.22;
}

html[data-theme="dark"] .site-header.scrolled {
    background: rgba(20, 20, 20, 0.88);
    border-bottom-color: var(--el-border-color);
}

/* Buttons aligned with Element UI */
.btn-primary-glass {
    background: var(--el-color-primary);
    color: #fff;
    box-shadow: 0 4px 14px var(--el-color-primary-alpha-35);
}

.btn-primary-glass:hover,
.btn-primary-glass:focus {
    background: var(--el-color-primary-light-3);
    color: #fff;
    box-shadow: 0 6px 18px var(--el-color-primary-alpha-40);
}

.btn-success-glass {
    background: var(--el-color-success);
    color: #fff;
    box-shadow: 0 4px 14px var(--el-color-success-alpha-35);
}

.btn-success-glass:hover,
.btn-success-glass:focus {
    background: var(--el-color-success-light-3);
    color: #fff;
}

.site-nav-actions .btn-primary-glass {
    box-shadow: 0 2px 10px var(--el-color-primary-alpha-28);
}

.glass-card:hover {
    box-shadow: 0 16px 48px var(--el-color-primary-alpha-18);
}

/* Theme toggle */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

html[data-theme="light"] .theme-toggle-btn {
    border-color: var(--el-border-color);
    background: var(--el-fill-color-light);
    color: var(--el-text-color-regular);
}

html[data-theme="light"] .theme-toggle-btn:hover,
html[data-theme="light"] .theme-toggle-btn:focus {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
    border-color: var(--el-color-primary-light-7);
}

.site-nav-mobile-tools .theme-toggle-btn {
    width: 40px;
    height: 40px;
}

/* SaaS page surfaces */
html[data-theme="dark"] body.page-saas .glass,
html[data-theme="dark"] body.page-saas .glass-card,
html[data-theme="dark"] body.page-saas .content-card {
    background: var(--saas-surface);
    border-color: var(--saas-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body.page-saas .glass-card:hover:not(.content-card):not(.glass-card--static):not(.sidenav-panel):not(.user-panel):not(.empty-state) {
    border-color: var(--el-border-color-light);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] body.page-saas .page-hero,
html[data-theme="dark"] body.page-saas .market-hero,
html[data-theme="dark"] body.page-saas .home-hero-v2 {
    background: var(--saas-hero);
}

html[data-theme="dark"] body.page-saas .page-hero-copy h1,
html[data-theme="dark"] body.page-saas .market-hero-copy h1,
html[data-theme="dark"] body.page-saas .section-title,
html[data-theme="dark"] body.page-saas .form-card-title,
html[data-theme="dark"] body.page-saas .custom-intro h2,
html[data-theme="dark"] body.page-saas .feature-item h3,
html[data-theme="dark"] body.page-saas .user-page-title,
html[data-theme="dark"] body.page-saas .page-header,
html[data-theme="dark"] body.page-saas .detail-prose h2,
html[data-theme="dark"] body.page-saas .detail-prose h3,
html[data-theme="dark"] body.page-saas .detail-prose h4,
html[data-theme="dark"] body.page-saas .market-side-text strong,
html[data-theme="dark"] body.page-saas .user-nickname a {
    color: var(--saas-text);
}

html[data-theme="dark"] body.page-saas .page-hero-copy p,
html[data-theme="dark"] body.page-saas .market-hero-copy p,
html[data-theme="dark"] body.page-saas .section-desc,
html[data-theme="dark"] body.page-saas .custom-intro p,
html[data-theme="dark"] body.page-saas .custom-intro ul,
html[data-theme="dark"] body.page-saas .feature-item p,
html[data-theme="dark"] body.page-saas .detail-prose,
html[data-theme="dark"] body.page-saas .detail-prose.article-content,
html[data-theme="dark"] body.page-saas .user-bio,
html[data-theme="dark"] body.page-saas .empty-state {
    color: var(--saas-text-muted);
}

html[data-theme="dark"] body.page-saas .section-label,
html[data-theme="dark"] body.page-saas .market-side-icon,
html[data-theme="dark"] body.page-saas .feature-icon {
    background: var(--el-color-primary-light-9);
    border-color: var(--el-color-primary-light-8);
    color: var(--el-color-primary-light-3);
}

html[data-theme="dark"] body.page-saas .market-side-text span {
    color: var(--el-color-primary-light-3);
}

html[data-theme="dark"] body.page-saas .search-bar input,
html[data-theme="dark"] body.page-saas .form-group input,
html[data-theme="dark"] body.page-saas .form-group textarea,
html[data-theme="dark"] body.page-saas .form-group select,
html[data-theme="dark"] body.page-saas .filter-bar,
html[data-theme="dark"] body.page-saas .market-toolbar,
html[data-theme="dark"] body.page-saas .news-toolbar,
html[data-theme="dark"] body.page-saas .market-app-card,
html[data-theme="dark"] body.page-saas .market-side-card {
    background: var(--saas-surface-muted);
    border-color: var(--saas-border);
    color: var(--el-text-color-regular);
}

html[data-theme="dark"] body.page-saas .filter-bar a {
    background: var(--saas-surface);
    border-color: var(--saas-border);
    color: var(--saas-text-muted);
}

html[data-theme="dark"] body.page-saas .filter-bar a:hover,
html[data-theme="dark"] body.page-saas .filter-bar a.active,
html[data-theme="dark"] body.page-saas .pagination-wrap li.active span,
html[data-theme="dark"] body.page-saas .pagination-wrap li a:hover,
html[data-theme="dark"] body.page-saas .user-center-filters a.active,
html[data-theme="dark"] body.page-saas .market-filters a.active {
    background: var(--el-color-primary);
    border-color: var(--el-color-primary);
    color: #fff;
}

html[data-theme="dark"] body.page-saas .form-group label {
    color: var(--el-text-color-regular);
}

html[data-theme="dark"] body.page-saas .form-group input:focus,
html[data-theme="dark"] body.page-saas .form-group textarea:focus,
html[data-theme="dark"] body.page-saas .form-group select:focus,
html[data-theme="dark"] body.page-saas .search-bar input:focus {
    border-color: var(--el-color-primary);
    box-shadow: 0 0 0 3px var(--saas-focus-ring);
}

html[data-theme="dark"] body.page-saas .pagination-wrap li a,
html[data-theme="dark"] body.page-saas .pagination-wrap li span,
html[data-theme="dark"] body.page-saas .user-center-filters a,
html[data-theme="dark"] body.page-saas .market-filters a {
    background: var(--saas-surface-muted);
    border-color: var(--saas-border);
    color: var(--saas-text-muted);
}

html[data-theme="dark"] body.page-saas .page-header,
html[data-theme="dark"] body.page-saas .user-page-header {
    border-bottom-color: var(--saas-border);
}

html[data-theme="dark"] body.page-saas .user-panel .btn-outline-glass {
    background: var(--saas-surface-muted);
    color: var(--el-text-color-regular);
    border-color: var(--saas-border);
}

html[data-theme="dark"] body.page-saas .user-panel .btn-outline-glass:hover {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary-light-3);
    border-color: var(--el-color-primary-light-8);
}

html[data-theme="dark"] body.page-saas .user-profile-card {
    background: linear-gradient(135deg, var(--saas-surface-muted) 0%, var(--el-color-primary-light-9) 100%);
    border-color: var(--saas-border);
}

html[data-theme="dark"] body.page-saas .user-nickname a:hover {
    color: var(--el-color-primary-light-3);
}

/* Element UI components */
.el-button--primary {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
}

.el-button--primary:focus,
.el-button--primary:hover {
    background-color: var(--el-color-primary-light-3);
    border-color: var(--el-color-primary-light-3);
}

.el-button--success {
    background-color: var(--el-color-success);
    border-color: var(--el-color-success);
}

.el-button--danger {
    background-color: var(--el-color-danger);
    border-color: var(--el-color-danger);
}

/* Checkout / order / coupons */
.pricing-checkout-submit {
    background: var(--el-color-primary);
    box-shadow: 0 8px 24px var(--el-color-primary-alpha-32);
}

.pricing-checkout-submit:hover {
    background: var(--el-color-primary-light-3);
    box-shadow: 0 12px 28px var(--el-color-primary-alpha-38);
}

html[data-theme="dark"] body.page-saas .order-create-panel,
html[data-theme="dark"] body.page-saas .order-create-coupons,
html[data-theme="dark"] body.page-saas .pricing-checkout-dialog {
    background: var(--saas-surface);
    border-color: var(--saas-border);
    color: var(--el-text-color-regular);
}

html[data-theme="dark"] body.page-saas .order-create-panel .form-group label,
html[data-theme="dark"] body.page-saas .pricing-checkout-purchase__label,
html[data-theme="dark"] body.page-saas .pricing-checkout-summary,
html[data-theme="dark"] body.page-saas .pricing-checkout-note,
html[data-theme="dark"] body.page-saas .order-create-coupons__title {
    color: var(--el-text-color-regular);
}

html[data-theme="dark"] body.page-saas .order-create-panel .form-group input[type="text"],
html[data-theme="dark"] body.page-saas .order-create-panel .form-group textarea,
html[data-theme="dark"] body.page-saas .pricing-checkout-coupon-row input,
html[data-theme="dark"] body.page-saas .order-create-coupons .pricing-coupon-item {
    background: var(--saas-surface-muted);
    border-color: var(--saas-border);
    color: var(--el-text-color-regular);
}

html[data-theme="dark"] body.page-saas .coupon-card {
    background: var(--saas-surface-muted);
    border-color: var(--saas-border);
}

html[data-theme="dark"] body.page-saas .coupon-card__name,
html[data-theme="dark"] body.page-saas .coupon-card__value,
html[data-theme="dark"] body.page-saas .coupon-card__meta dd {
    color: var(--saas-text);
}

html[data-theme="dark"] body.page-saas .coupon-card__code,
html[data-theme="dark"] body.page-saas .coupon-card__meta dt {
    color: var(--saas-text-muted);
}

html[data-theme="dark"] body.page-saas .coupon-card--available {
    border-color: var(--el-color-primary-alpha-35);
}

html[data-theme="dark"] body.page-saas .coupon-card__status--available {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary-light-3);
}

html[data-theme="dark"] body.page-saas .user-center-filters a:hover,
html[data-theme="dark"] body.page-saas .market-filters a:hover {
    color: var(--el-color-primary-light-3);
    border-color: var(--el-color-primary-light-8);
}