/**
 * KeepBoard - Themes
 * Light and Dark theme color schemes
 */

/* ========== Light Theme (Default) ========== */
body[data-theme="light"] {
    /* Updated to slate palette for consistency with new design */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    
    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-tertiary: #94a3b8;
    
    --color-border: #e2e8f0;
    --color-border-dark: #cbd5e1;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ========== Dark Theme ========== */
body[data-theme="dark"] {
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
    
    --color-border: #334155;
    --color-border-dark: #475569;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
}

/* Dark theme adjustments for specific elements */
body[data-theme="dark"] {
    color-scheme: dark;
}

body[data-theme="dark"] img {
    opacity: 0.9;
}

body[data-theme="dark"] .btn-secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

body[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--color-border-dark);
}

body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus {
    border-color: var(--color-primary);
    background-color: var(--color-bg-tertiary);
}

body[data-theme="dark"] .card {
    background-color: var(--color-bg-secondary);
}

body[data-theme="dark"] .modal-content {
    background-color: var(--color-bg-secondary);
}

body[data-theme="dark"] .dropdown-menu {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

body[data-theme="dark"] code {
    background-color: var(--color-bg-tertiary);
    color: var(--color-primary-light);
}

/* NEW: Dark theme for landing page specific elements */
body[data-theme="dark"] .hero {
    background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
}

body[data-theme="dark"] .feature-card {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

body[data-theme="dark"] .testimonial-card {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
}

body[data-theme="dark"] .landing-footer {
    background-color: rgba(15, 23, 42, 0.5);
    border-top-color: var(--color-border);
}

body[data-theme="dark"] .cta {
    background-color: rgba(59, 130, 246, 0.05);
}

body[data-theme="dark"] .dark-mode-section {
    background-color: #000000;
}

/* ========== Theme Toggle Button ========== */
.theme-toggle {
    position: relative;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.theme-toggle:hover {
    background-color: var(--color-bg-tertiary);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary);
    transition: transform var(--transition-base);
}

.theme-toggle:hover svg {
    transform: rotate(20deg);
}

/* Hide/show icons based on theme */
body[data-theme="light"] .theme-toggle .moon-icon {
    display: block;
}

body[data-theme="light"] .theme-toggle .sun-icon {
    display: none;
}

body[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

body[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

/* ========== Smooth Theme Transition ========== */
body {
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

* {
    transition: background-color var(--transition-slow), 
                border-color var(--transition-slow),
                color var(--transition-slow);
}

/* Prevent transition on page load */
body.no-transition * {
    transition: none !important;
}