/**
 * Theme Toggle Styles
 * Light/Dark mode switching for OpenClawHive
 */

/* === LIGHT MODE VARIABLES === */
[data-theme="light"] {
    --bg-base: #fafafa;
    --bg-surface: #ffffff;
    --bg-elevated: #f5f5f5;
    --bg-card: #ffffff;
    --text-primary: #0a0a0a;
    --text-secondary: #525252;
    --text-muted: #a3a3a3;
    --border-color: rgba(0,0,0,0.06);
    --border-hover: rgba(0,0,0,0.12);
    --gradient-subtle: linear-gradient(135deg, rgba(45,122,255,0.08), rgba(139,92,246,0.08));
    --glow-blue: 0 0 60px -12px rgba(45,122,255,0.2);
    --glow-purple: 0 0 60px -12px rgba(139,92,246,0.2);
}

/* === LIGHT MODE OVERRIDES === */
[data-theme="light"] body {
    background: var(--bg-base);
    color: var(--text-primary);
}

[data-theme="light"] body::before {
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

[data-theme="light"] .grid-bg {
    background-image:
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
}

[data-theme="light"] .orb-1 {
    background: radial-gradient(circle, rgba(45,122,255,0.08), transparent 70%);
}

[data-theme="light"] .orb-2 {
    background: radial-gradient(circle, rgba(139,92,246,0.06), transparent 70%);
}

[data-theme="light"] .orb-3 {
    background: radial-gradient(circle, rgba(236,72,153,0.04), transparent 70%);
}

[data-theme="light"] header.scrolled {
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .nav-center {
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .nav-center a:hover {
    background: rgba(0,0,0,0.05);
}

[data-theme="light"] .btn-primary {
    background: #0a0a0a;
    color: #fff;
}

[data-theme="light"] .btn-primary:hover {
    background: #1a1a1a;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

[data-theme="light"] .btn-outline {
    border: 1px solid rgba(0,0,0,0.15);
}

[data-theme="light"] .btn-outline:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.25);
}

[data-theme="light"] .hero-eyebrow {
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .terminal-window {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.03),
        0 20px 60px -20px rgba(0,0,0,0.15),
        0 0 120px -40px rgba(45,122,255,0.1);
}

[data-theme="light"] .terminal-header {
    background: rgba(0,0,0,0.02);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .terminal-body {
    background: var(--bg-surface);
}

[data-theme="light"] .mini-code {
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .step-card:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
}

[data-theme="light"] .bento-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .bento-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 12px 40px -12px rgba(0,0,0,0.15);
}

[data-theme="light"] .bento-card::after {
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,0.02), transparent 40%);
}

[data-theme="light"] .skill-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .skill-card:hover {
    background: var(--bg-elevated);
}

[data-theme="light"] .skill-emoji {
    background: rgba(0,0,0,0.03);
}

[data-theme="light"] .arch-diagram {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .arch-layer {
    background: var(--bg-base);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .arch-layer:hover {
    background: rgba(45,122,255,0.05);
}

[data-theme="light"] .pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .pricing-card.featured {
    background: linear-gradient(180deg, rgba(45,122,255,0.03) 0%, var(--bg-card) 100%);
    box-shadow: 0 0 80px -20px rgba(45,122,255,0.1);
}

[data-theme="light"] .testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .testimonial-avatar {
    background: var(--gradient-subtle);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .faq-item {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .faq-icon {
    border: 1px solid var(--border-color);
}

[data-theme="light"] .cta-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] footer {
    border-top: 1px solid var(--border-color);
}

[data-theme="light"] .footer-bottom {
    border-top: 1px solid var(--border-color);
}

[data-theme="light"] .mobile-toggle {
    border: 1px solid var(--border-color);
}

[data-theme="light"] .mobile-menu {
    background: rgba(255,255,255,0.95);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .mobile-menu a {
    border-bottom: 1px solid var(--border-color);
}

/* === THEME TOGGLE BUTTON === */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-hover);
    transform: scale(1.05);
}

.theme-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-blue);
}

/* Toggle Icons */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    width: 20px;
    height: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
    color: #f59e0b;
}

.theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: var(--text-primary);
}

/* Light mode toggle state */
[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

/* Toggle button light mode style */
[data-theme="light"] .theme-toggle {
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .theme-toggle:hover {
    background: rgba(0,0,0,0.08);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
    
    .theme-toggle .icon-sun,
    .theme-toggle .icon-moon {
        width: 18px;
        height: 18px;
    }
}

/* === SMOOTH THEME TRANSITION === */
body,
.grid-bg,
.orb,
header,
.nav-center,
.btn,
.step-card,
.bento-card,
.skill-card,
.arch-diagram,
.pricing-card,
.testimonial-card,
.cta-box,
.terminal-window,
.mobile-menu {
    transition: 
        background-color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        color 0.4s ease;
}

/* === BLOG SPECIFIC LIGHT MODE === */
[data-theme="light"] .blog-hero {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
}

[data-theme="light"] .blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .blog-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 12px 40px -12px rgba(0,0,0,0.12);
}

[data-theme="light"] .blog-card-image {
    background: rgba(0,0,0,0.03);
}

[data-theme="light"] .blog-meta {
    color: var(--text-muted);
}

[data-theme="light"] .blog-content {
    background: var(--bg-card);
}

[data-theme="light"] .blog-content pre,
[data-theme="light"] .blog-content code {
    background: rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .blog-content blockquote {
    background: rgba(0,0,0,0.02);
    border-left: 3px solid var(--accent-blue);
}

[data-theme="light"] .author-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .related-post {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .related-post:hover {
    border-color: var(--border-hover);
}

[data-theme="light"] .pagination a,
[data-theme="light"] .pagination span {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .pagination a:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
}

/* === CONTACT PAGE LIGHT MODE === */
[data-theme="light"] .contact-hero {
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
}

[data-theme="light"] .contact-form-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .form-group select {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] .form-group select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(45,122,255,0.1);
}

[data-theme="light"] .form-group input::placeholder,
[data-theme="light"] .form-group textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="light"] .contact-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .contact-info-item {
    border-bottom: 1px solid var(--border-color);
}

/* === SELECTION IN LIGHT MODE === */
[data-theme="light"] ::selection {
    background: rgba(139,92,246,0.2);
    color: #000;
}

/* === LOGO LIGHT MODE === */
[data-theme="light"] .logo-icon {
    background: #fff;
    box-shadow: 0px 0px 0px rgba(102, 126, 234, 0.3);
}

[data-theme="light"] .logo-icon::after {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.2;
    filter: blur(4px);
    inset: -1px;
}