/**
 * OmniMemo Theme Styles - Neomorphism Design
 * 新擬態設計風格：柔和雙陰影、內凹/外凸效果
 */

/* Light Theme (Default) - Neomorphism */
:root {
    /* Neomorphic Base Colors */
    --bg-primary: #e0e5ec;
    --bg-secondary: #e0e5ec;
    --bg-card: #e0e5ec;
    --bg-hover: #d1d9e6;
    --bg-active: #c8d0dd;
    --bg-input: #e0e5ec;

    /* Text Colors */
    --text-primary: #2d3748;
    --text-secondary: #475569;
    --text-tertiary: #64748b;

    /* Border Color */
    --border-color: transparent;

    /* Accent Colors (Indigo) */
    --accent-primary: #6366f1;
    --accent-secondary: #4f46e5;
    --accent-bg: rgba(99, 102, 241, 0.15);
    --accent-light: #818cf8;

    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Neomorphic Shadow Colors */
    --neu-shadow-light: #ffffff;
    --neu-shadow-dark: #a3b1c6;
    
    /* Neomorphic Shadow Presets */
    --neu-shadow-raised: 
        6px 6px 12px var(--neu-shadow-dark),
        -6px -6px 12px var(--neu-shadow-light);
    --neu-shadow-raised-sm: 
        4px 4px 8px var(--neu-shadow-dark),
        -4px -4px 8px var(--neu-shadow-light);
    --neu-shadow-raised-lg: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
    --neu-shadow-inset: 
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light);
    --neu-shadow-inset-sm: 
        inset 2px 2px 4px var(--neu-shadow-dark),
        inset -2px -2px 4px var(--neu-shadow-light);
    --neu-shadow-pressed: 
        inset 6px 6px 12px var(--neu-shadow-dark),
        inset -6px -6px 12px var(--neu-shadow-light);
    
    /* Neomorphic Border Radius */
    --neu-radius: 20px;
    --neu-radius-sm: 12px;
    --neu-radius-lg: 25px;
}

/* Dark Theme - Neomorphism */
[data-theme="dark"] {
    --bg-primary: #2d3748;
    --bg-secondary: #2d3748;
    --bg-card: #2d3748;
    --bg-hover: #3d4a5c;
    --bg-active: #4a5568;
    --bg-input: #2d3748;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;

    --border-color: transparent;

    --accent-primary: #818cf8;
    --accent-secondary: #6366f1;
    --accent-bg: rgba(129, 140, 248, 0.2);
    --accent-light: #a5b4fc;

    /* Dark Neomorphic Shadow Colors */
    --neu-shadow-light: #3d4a5c;
    --neu-shadow-dark: #1a202c;
    
    /* Dark Neomorphic Shadow Presets */
    --neu-shadow-raised: 
        6px 6px 12px var(--neu-shadow-dark),
        -6px -6px 12px var(--neu-shadow-light);
    --neu-shadow-raised-sm: 
        4px 4px 8px var(--neu-shadow-dark),
        -4px -4px 8px var(--neu-shadow-light);
    --neu-shadow-raised-lg: 
        8px 8px 16px var(--neu-shadow-dark),
        -8px -8px 16px var(--neu-shadow-light);
    --neu-shadow-inset: 
        inset 4px 4px 8px var(--neu-shadow-dark),
        inset -4px -4px 8px var(--neu-shadow-light);
    --neu-shadow-inset-sm: 
        inset 2px 2px 4px var(--neu-shadow-dark),
        inset -2px -2px 4px var(--neu-shadow-light);
    --neu-shadow-pressed: 
        inset 6px 6px 12px var(--neu-shadow-dark),
        inset -6px -6px 12px var(--neu-shadow-light);
}

/* Auto theme based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #2d3748;
        --bg-secondary: #2d3748;
        --bg-card: #2d3748;
        --bg-hover: #3d4a5c;
        --bg-active: #4a5568;
        --bg-input: #2d3748;

        --text-primary: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-tertiary: #94a3b8;

        --border-color: transparent;

        --accent-primary: #818cf8;
        --accent-secondary: #6366f1;
        --accent-bg: rgba(129, 140, 248, 0.2);
        --accent-light: #a5b4fc;

        /* Dark Neomorphic Shadow Colors */
        --neu-shadow-light: #3d4a5c;
        --neu-shadow-dark: #1a202c;
        
        /* Dark Neomorphic Shadow Presets */
        --neu-shadow-raised: 
            6px 6px 12px var(--neu-shadow-dark),
            -6px -6px 12px var(--neu-shadow-light);
        --neu-shadow-raised-sm: 
            4px 4px 8px var(--neu-shadow-dark),
            -4px -4px 8px var(--neu-shadow-light);
        --neu-shadow-raised-lg: 
            8px 8px 16px var(--neu-shadow-dark),
            -8px -8px 16px var(--neu-shadow-light);
        --neu-shadow-inset: 
            inset 4px 4px 8px var(--neu-shadow-dark),
            inset -4px -4px 8px var(--neu-shadow-light);
        --neu-shadow-inset-sm: 
            inset 2px 2px 4px var(--neu-shadow-dark),
            inset -2px -2px 4px var(--neu-shadow-light);
        --neu-shadow-pressed: 
            inset 6px 6px 12px var(--neu-shadow-dark),
            inset -6px -6px 12px var(--neu-shadow-light);
    }
}

/* Smooth theme transition */
body,
.header,
.modal-content,
.item-card,
.action-btn,
input,
textarea,
select,
.btn,
.setting-item,
.login-container,
.toast {
    transition:
        background-color var(--transition-normal),
        box-shadow var(--transition-normal),
        color var(--transition-normal);
}

/* Gradient text for branding */
.hero h2,
.header-logo h1,
.login-logo h1 {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}