:root {
    --theme-toggle-bg: rgba(255,255,255,0.05);
    --theme-toggle-hover: rgba(255,255,255,0.1);
}

html[data-theme="light"] {
    --hero: #eef2ff;
    --hero-soft: #f8fbff;
    --text: #0f172a;
    --muted: #64748b;
    --line: rgba(15,23,42,0.08);
    --bg: #f8fafc;
    --card: #ffffff;
    --surface: #ffffff;
    --panel: #f8fafc;
    --nav-bg: rgba(255,255,255,0.96);
}

html[data-theme="light"] * {
    color: inherit;
}

html[data-theme="light"] body,
html[data-theme="light"] body * {
    color: #0f172a !important;
}

html[data-theme="light"] a,
html[data-theme="light"] a *,
html[data-theme="light"] button,
html[data-theme="light"] button *,
html[data-theme="light"] span,
html[data-theme="light"] span *,
html[data-theme="light"] h1,
html[data-theme="light"] h1 *,
html[data-theme="light"] h2,
html[data-theme="light"] h2 *,
html[data-theme="light"] h3,
html[data-theme="light"] h3 *,
html[data-theme="light"] h4,
html[data-theme="light"] h4 *,
html[data-theme="light"] h5,
html[data-theme="light"] h5 *,
html[data-theme="light"] h6,
html[data-theme="light"] h6 *,
html[data-theme="light"] p,
html[data-theme="light"] p *,
html[data-theme="light"] label,
html[data-theme="light"] label *,
html[data-theme="light"] li,
html[data-theme="light"] li *,
html[data-theme="light"] td,
html[data-theme="light"] td * {
    color: #0f172a !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-member:hover {
    color: var(--primary) !important;
}

html[data-theme="light"] .brand,
html[data-theme="light"] .brand span {
    color: #0f172a !important;
}

html[data-theme="light"] select {
    color: #0f172a !important;
    background: rgba(15,23,42,0.05) !important;
}

html[data-theme="dark"] select {
    color: #f8fafc !important;
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

html[data-theme="dark"] select:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    background: #0d1c3a !important;
    color: #f8fafc !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea {
    color: #0f172a !important;
    background: #ffffff !important;
    border-color: rgba(15,23,42,0.1) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: rgba(15,23,42,0.5) !important;
}


html[data-theme="light"] body {
    background: var(--bg);
    color: #0f172a !important;
}

html[data-theme="light"] .nav-wrapper,
html[data-theme="light"] .nav,
html[data-theme="light"] .form-card,
html[data-theme="light"] .card,
html[data-theme="light"] .footer,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .product-modal__dialog,
html[data-theme="light"] .section-header,
html[data-theme="light"] .hero,
html[data-theme="light"] .hero-content,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .settings-grid {
    background: var(--surface, #ffffff);
    color: #0f172a !important;
    border-color: rgba(15,23,42,0.08);
}

html[data-theme="light"] .nav-wrapper {
    background: var(--nav-bg);
}

html[data-theme="light"] .nav-link,
html[data-theme="light"] .nav-member,
html[data-theme="light"] .brand,
html[data-theme="light"] .btn-logout,
html[data-theme="light"] .theme-toggle {
    color: #0f172a !important;
}

html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-primary *,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn.primary *,
html[data-theme="light"] .login-btn,
html[data-theme="light"] .login-btn *,
html[data-theme="light"] .floating-support__circle,
html[data-theme="light"] .floating-support__circle * {
    color: var(--on-primary) !important;
}

html[data-theme="light"] .coupon-popup,
html[data-theme="light"] .coupon-popup * {
    color: initial;
}

html[data-theme="light"] .coupon-popup__dialog {
    background: linear-gradient(180deg, rgba(13,28,58,0.98), rgba(17,31,63,0.98)) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

html[data-theme="light"] .coupon-popup__close {
    color: #ffffff !important;
}

html[data-theme="light"] .coupon-popup__card {
    background: radial-gradient(circle at top, rgba(189,220,255,0.98), #ffffff 32%, #f7fbff 100%) !important;
    border-color: rgba(116, 177, 255, 0.5) !important;
}

html[data-theme="light"] .coupon-popup__dots span {
    background: #18c62e !important;
}

html[data-theme="light"] .coupon-popup__eyebrow,
html[data-theme="light"] .coupon-popup__offer,
html[data-theme="light"] .coupon-popup__desc,
html[data-theme="light"] .coupon-popup__desc b,
html[data-theme="light"] .coupon-popup__label,
html[data-theme="light"] .coupon-popup__code,
html[data-theme="light"] .coupon-popup__timer,
html[data-theme="light"] .coupon-popup__copy-status,
html[data-theme="light"] .coupon-popup__footer-btn,
html[data-theme="light"] .coupon-popup__footer-btn *,
html[data-theme="light"] .coupon-popup__cta,
html[data-theme="light"] .coupon-popup__cta * {
    color: inherit;
}

html[data-theme="light"] .coupon-popup__eyebrow {
    color: #14213d !important;
}

html[data-theme="light"] .coupon-popup__eyebrow u {
    text-decoration-color: rgba(24,198,46,0.35) !important;
}

html[data-theme="light"] .coupon-popup__offer {
    color: #136cff !important;
}

html[data-theme="light"] .coupon-popup__desc {
    color: #2f3d5b !important;
}

html[data-theme="light"] .coupon-popup__desc b {
    color: #1a6df2 !important;
}

html[data-theme="light"] .coupon-popup__codebox {
    background: linear-gradient(180deg, #10295f, #071735) !important;
    border-color: #0f55e4 !important;
}

html[data-theme="light"] .coupon-popup__ticket,
html[data-theme="light"] .coupon-popup__badge {
    color: #ffffff !important;
}

html[data-theme="light"] .coupon-popup__label {
    color: #ffffff !important;
}

html[data-theme="light"] .coupon-popup__code {
    color: #2f81ff !important;
}

html[data-theme="light"] .coupon-popup__timer,
html[data-theme="light"] .coupon-popup__copy-status {
    color: #4f6d9f !important;
}

html[data-theme="light"] .coupon-popup__cta {
    background: linear-gradient(180deg, #34ef38, #18c927) !important;
    color: #041219 !important;
}

html[data-theme="light"] .coupon-popup__cta-icon {
    background: #09192e !important;
    color: #ffffff !important;
}

html[data-theme="light"] .coupon-popup__footer-btn {
    background: linear-gradient(90deg, #1b4bc4, #2f6dff) !important;
    color: #ffffff !important;
}

/* Admin login page light mode fixes */
html[data-theme="light"] .login-container {
    background: #ffffff !important;
    border-color: rgba(15,23,42,0.1) !important;
    box-shadow: 0 24px 52px rgba(15,23,42,0.12) !important;
}

html[data-theme="light"] .login-brand-name {
    color: #0f172a !important;
}

html[data-theme="light"] .login-subtitle {
    color: #64748b !important;
}

html[data-theme="light"] .field-label,
html[data-theme="light"] .remember-row,
html[data-theme="light"] .back-link a,
html[data-theme="light"] .login-theme {
    color: #0f172a !important;
}

html[data-theme="light"] .input-shell input {
    background: #f8fafc !important;
    border-color: rgba(15,23,42,0.14) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .input-shell input::placeholder {
    color: #64748b !important;
}

html[data-theme="light"] .input-shell .input-icon,
html[data-theme="light"] .password-toggle {
    color: #64748b !important;
}

html[data-theme="light"] .login-theme {
    background: #f8fafc !important;
    border-color: rgba(15,23,42,0.12) !important;
}

html[data-theme="light"] .login-btn {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .login-btn *,
html[data-theme="light"] .login-btn span {
    color: #ffffff !important;
}

html[data-theme="light"] .back-link a {
    color: #1d4ed8 !important;
}

.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
}

.logo-preview {
    max-width: 180px;
    max-height: 48px;
    object-fit: contain;
    border: 1px solid rgba(15,23,42,0.12);
    border-radius: 8px;
    margin-top: 8px;
}

html[data-theme="light"] [style*="color: white" i],
html[data-theme="light"] [style*="color: #fff" i],
html[data-theme="light"] [style*="color:#fff" i],
html[data-theme="light"] [style*="color: #ffffff" i],
html[data-theme="light"] [style*="color:#ffffff" i] {
    color: #0f172a !important;
}

.theme-toggle {
    background: var(--theme-toggle-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text);
    font-size: 16px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle:hover {
    background: var(--theme-toggle-hover);
    transform: translateY(-1px);
}