/* Theme tokens – Light mode is default CSS vars, dark mode via .dark class */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: rgba(255, 255, 255, 0.85);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-faint: #94a3b8;
    --border-subtle: rgba(15, 23, 42, 0.08);
    --border-medium: rgba(15, 23, 42, 0.12);
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-shadow: 0 4px 30px rgba(15, 23, 42, 0.06);
    --nav-scrolled-bg: rgba(255, 255, 255, 0.95);
    --glow-orb-1: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
    --glow-orb-2: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    --modal-overlay: rgba(15, 23, 42, 0.4);
    --input-bg: rgba(241, 245, 249, 0.8);
    --input-border: rgba(15, 23, 42, 0.12);
    --section-alt: rgba(241, 245, 249, 0.6);
    --card-featured-bg: rgba(239, 246, 255, 0.8);
    --calendar-bg: #ffffff;
    color-scheme: light;
}

html.dark {
    --bg-primary: #020617;
    --bg-secondary: #0b1120;
    --bg-tertiary: #0f172a;
    --bg-elevated: rgba(15, 23, 42, 0.95);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-faint: #64748b;
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-medium: rgba(255, 255, 255, 0.1);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    --nav-scrolled-bg: rgba(2, 6, 23, 0.95);
    --glow-orb-1: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    --glow-orb-2: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    --modal-overlay: rgba(0, 0, 0, 0.6);
    --input-bg: rgba(30, 41, 59, 0.5);
    --input-border: rgba(255, 255, 255, 0.1);
    --section-alt: rgba(15, 23, 42, 0.3);
    --card-featured-bg: rgba(15, 23, 42, 0.4);
    --calendar-bg: #121212;
    color-scheme: dark;
}

html, body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    width: 100%;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Glassmorphism */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-card:hover {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.15);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.gradient-text {
    background: linear-gradient(to right, #0284c7, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.dark .gradient-text {
    background: linear-gradient(to right, #38bdf8, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glow-orb-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    background: var(--glow-orb-1);
    top: -200px;
    left: -200px;
    z-index: -1;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.glow-orb-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    background: var(--glow-orb-2);
    top: 40%;
    right: -100px;
    z-index: -1;
    border-radius: 50%;
    transition: background 0.3s ease;
}

#mobile-menu {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

.nav-brand {
    margin-left: -0.375rem;
}

@media (min-width: 640px) {
    .nav-brand {
        margin-left: -0.5rem;
    }
}

.nav-link-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.25;
}

.nav-scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: var(--nav-scrolled-bg) !important;
}

.saas-cta-button {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 28px;
    background-color: #1e40af;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.saas-cta-button:hover {
    background-color: #1d4ed8;
    transform: translateY(-1px);
}

.mobile-theme-toggle {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.mobile-theme-toggle .theme-switch {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 9999px;
    background: var(--glass-bg);
    border: 1px solid var(--border-medium);
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

html.dark .mobile-theme-toggle .theme-switch {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.22);
}

html:not(.dark) .mobile-theme-toggle .theme-switch {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.18);
}

.mobile-theme-toggle .theme-switch-knob {
    position: absolute;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    box-shadow: 0 1px 4px rgba(14, 165, 233, 0.35);
    transition: left 0.25s ease, transform 0.2s ease;
}

html.dark .mobile-theme-toggle .theme-switch-knob {
    left: calc(100% - 21px);
}

html:not(.dark) .mobile-theme-toggle .theme-switch-knob {
    left: 3px;
}

.mobile-theme-toggle:hover .theme-switch {
    border-color: rgba(14, 165, 233, 0.45);
}

.mobile-theme-toggle:hover .theme-switch-knob {
    transform: scale(1.06);
}

.mobile-theme-toggle:hover .mobile-theme-label {
    color: #0ea5e9;
}

/* Theme toggle button (desktop header) */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    background: var(--glass-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    color: var(--text-primary);
    border-color: rgba(14, 165, 233, 0.4);
    background: rgba(14, 165, 233, 0.08);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    width: 18px;
    height: 18px;
}

html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }
html:not(.dark) .theme-toggle .icon-sun { display: none; }
html:not(.dark) .theme-toggle .icon-moon { display: block; }

/* Theme toggle button (desktop header) */

/* Light mode: remap hardcoded Tailwind dark utilities */
html:not(.dark) .text-white:not(.bg-accentBlue) { color: var(--text-primary); }
html:not(.dark) .bg-accentBlue.text-white,
html:not(.dark) a.bg-accentBlue.text-white,
html:not(.dark) button.bg-accentBlue.text-white { color: #ffffff !important; }
html:not(.dark) .text-gray-300 { color: #64748b; }
html:not(.dark) .text-gray-400 { color: #64748b; }
html:not(.dark) .text-slate-200 { color: #334155; }
html:not(.dark) .text-slate-300 { color: #475569; }
html:not(.dark) .text-slate-400 { color: #64748b; }
html:not(.dark) .text-slate-500 { color: #64748b; }
html:not(.dark) .text-slate-600 { color: #94a3b8; }

html:not(.dark) a.hover\:text-white:hover { color: var(--text-primary); }
html:not(.dark) button.hover\:text-white:hover { color: var(--text-primary); }
html:not(.dark) button.hover\:bg-accentBlue:hover { color: #ffffff !important; }

html:not(.dark) .bg-darker,
html:not(.dark) .bg-darker\/95 { background-color: rgba(255, 255, 255, 0.98); }

html:not(.dark) .bg-slate-900\/30 { background-color: var(--section-alt); }
html:not(.dark) .bg-slate-900\/40 { background-color: var(--card-featured-bg); }
html:not(.dark) .bg-slate-900\/95,
html:not(.dark) .bg-slate-900\/98 { background-color: rgba(255, 255, 255, 0.98); }
html:not(.dark) .bg-slate-900 { background-color: #f8fafc; }
html:not(.dark) .bg-slate-800 { background-color: #e2e8f0; }
html:not(.dark) .bg-slate-800\/30 { background-color: rgba(241, 245, 249, 0.8); }
html:not(.dark) .bg-slate-800\/50 { background-color: rgba(241, 245, 249, 0.9); }
html:not(.dark) .hover\:bg-slate-800:hover { background-color: #e2e8f0; }

html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/20 { border-color: var(--border-medium); }

html:not(.dark) .border-white\/30 { border-color: rgba(15, 23, 42, 0.2); }

html:not(.dark) .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04); }
html:not(.dark) .bg-white\/10 { background-color: rgba(15, 23, 42, 0.06); }
html:not(.dark) .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.08); }
html:not(.dark) .hover\:bg-white\/20:hover { background-color: rgba(15, 23, 42, 0.1); }

html:not(.dark) .text-white\/20 { color: rgba(15, 23, 42, 0.2); }

html:not(.dark) .hover\:border-slate-600:hover { border-color: #94a3b8; }

/* Featured pricing card – light mode */
html:not(.dark) .pricing-featured .text-white { color: #0f172a; }
html:not(.dark) .pricing-featured .text-sky-200 { color: #0369a1; }
html:not(.dark) .pricing-featured .text-sky-300 { color: #0284c7; }
html:not(.dark) .pricing-featured .border-sky-900 { border-color: rgba(14, 165, 233, 0.2); }

/* Form inputs */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    background-color: #ffffff !important;
}

/* Calendar iframe – no invert in light mode */
html:not(.dark) #calendar-iframe {
    filter: none !important;
}

html:not(.dark) #calendar-container {
    background-color: var(--calendar-bg) !important;
}

/* Gallery card overlays – lighter in light mode */
html:not(.dark) .gallery-card .card-overlay.overlay-front {
    background-color: rgba(248, 250, 252, 0.05) !important;
}

html:not(.dark) .gallery-card .card-overlay.overlay-mid {
    background-color: rgba(248, 250, 252, 0.15) !important;
}

html:not(.dark) .gallery-card .card-overlay.overlay-back {
    background-color: rgba(248, 250, 252, 0.3) !important;
}

html:not(.dark) .gallery-card-pos-0 {
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15) !important;
}

html:not(.dark) .gallery-card-pos-1 {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1) !important;
}

html:not(.dark) .gallery-card-pos-2 {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

/* Language switcher in light mode */
html:not(.dark) .lang-switcher {
    border-color: var(--border-medium);
    background-color: rgba(15, 23, 42, 0.03);
}

/* Vertical 中文 label on mobile to save header space */
@media (max-width: 1023px) {
    .lang-switcher .lang-zh-link {
        writing-mode: vertical-rl;
        text-orientation: upright;
        white-space: normal;
        letter-spacing: 0.06em;
        line-height: 1;
        padding: 0.1rem 0;
    }
}