/* ============================================
   NEUMORPHISM THEME
   Soft shadows, embossed UI, tactile design
   ============================================ */

[data-design-theme="neumorphism"] {
    /* Neumorphism color variables */
    --neuro-bg: #e0e5ec;
    --neuro-shadow-dark: rgba(163, 177, 198, 0.6);
    --neuro-shadow-light: rgba(255, 255, 255, 0.5);
}

[data-design-theme="neumorphism"][data-theme="dark"] {
    --neuro-bg: #2d3748;
    --neuro-shadow-dark: rgba(0, 0, 0, 0.5);
    --neuro-shadow-light: rgba(255, 255, 255, 0.05);
}

/* ============================================
   GLOBAL BACKGROUND
   ============================================ */

[data-design-theme="neumorphism"] body {
    background: var(--neuro-bg);
}

[data-design-theme="neumorphism"] {
    --bg-primary: #e0e5ec;
    --bg-secondary: #e0e5ec;
    --bg-tertiary: #d1d9e6;
    --text-primary: #4a5568;
    --text-secondary: #718096;
    --text-tertiary: #a0aec0;
    --border-color: transparent;
}

[data-design-theme="neumorphism"][data-theme="dark"] {
    --bg-primary: #2d3748;
    --bg-secondary: #2d3748;
    --bg-tertiary: #1a202c;
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e0;
    --text-tertiary: #a0aec0;
}

/* ============================================
   NAVIGATION
   ============================================ */

[data-design-theme="neumorphism"] .navbar {
    background: var(--neuro-bg);
    border: none;
    box-shadow:
        0 4px 6px var(--neuro-shadow-dark),
        0 -2px 4px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .nav-link {
    border-radius: 12px;
    box-shadow: none;
    background: transparent;
}

[data-design-theme="neumorphism"] .nav-link:hover {
    background: var(--neuro-bg);
    box-shadow:
        inset 3px 3px 6px var(--neuro-shadow-dark),
        inset -3px -3px 6px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .nav-link.active {
    box-shadow:
        inset 4px 4px 8px var(--neuro-shadow-dark),
        inset -4px -4px 8px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .nav-link.active::after {
    display: none;
}

/* ============================================
   CARDS
   ============================================ */

[data-design-theme="neumorphism"] .card,
[data-design-theme="neumorphism"] .project-card {
    background: var(--neuro-bg);
    border: none;
    border-radius: 20px;
    box-shadow:
        9px 9px 16px var(--neuro-shadow-dark),
        -9px -9px 16px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .card:hover,
[data-design-theme="neumorphism"] .project-card:hover {
    box-shadow:
        12px 12px 20px var(--neuro-shadow-dark),
        -12px -12px 20px var(--neuro-shadow-light);
}

/* ============================================
   BUTTONS
   ============================================ */

[data-design-theme="neumorphism"] .btn {
    border-radius: 16px;
    border: none;
}

[data-design-theme="neumorphism"] .btn-primary {
    background: linear-gradient(145deg, #667eea, #5a6dd1);
    box-shadow:
        6px 6px 12px rgba(90, 109, 209, 0.4),
        -6px -6px 12px rgba(102, 126, 234, 0.4);
}

[data-design-theme="neumorphism"] .btn-primary:hover {
    box-shadow:
        8px 8px 16px rgba(90, 109, 209, 0.5),
        -8px -8px 16px rgba(102, 126, 234, 0.5);
}

[data-design-theme="neumorphism"] .btn-primary:active {
    box-shadow:
        inset 4px 4px 8px rgba(90, 109, 209, 0.4),
        inset -4px -4px 8px rgba(102, 126, 234, 0.4);
}

[data-design-theme="neumorphism"] .btn-secondary {
    background: var(--neuro-bg);
    box-shadow:
        6px 6px 12px var(--neuro-shadow-dark),
        -6px -6px 12px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .btn-secondary:hover {
    box-shadow:
        8px 8px 16px var(--neuro-shadow-dark),
        -8px -8px 16px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .btn-secondary:active {
    box-shadow:
        inset 4px 4px 8px var(--neuro-shadow-dark),
        inset -4px -4px 8px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .btn-outline {
    background: var(--neuro-bg);
    border: none;
    box-shadow:
        6px 6px 12px var(--neuro-shadow-dark),
        -6px -6px 12px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .btn-outline:hover {
    background: linear-gradient(145deg, #667eea, #5a6dd1);
}

/* ============================================
   HERO SECTION
   ============================================ */

[data-design-theme="neumorphism"] .hero {
    background: var(--neuro-bg);
}

[data-design-theme="neumorphism"] .hero::before {
    display: none;
}

[data-design-theme="neumorphism"] .hero-content {
    background: var(--neuro-bg);
    padding: var(--spacing-2xl);
    border-radius: 30px;
    box-shadow:
        15px 15px 30px var(--neuro-shadow-dark),
        -15px -15px 30px var(--neuro-shadow-light);
}

/* ============================================
   SKILL BADGES
   ============================================ */

[data-design-theme="neumorphism"] .skill-badge {
    background: var(--neuro-bg);
    border: none;
    border-radius: 16px;
    box-shadow:
        6px 6px 12px var(--neuro-shadow-dark),
        -6px -6px 12px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .skill-badge:hover {
    box-shadow:
        8px 8px 16px var(--neuro-shadow-dark),
        -8px -8px 16px var(--neuro-shadow-light);
}

/* ============================================
   TECH TAGS
   ============================================ */

[data-design-theme="neumorphism"] .tech-tag {
    background: var(--neuro-bg);
    border: none;
    border-radius: 12px;
    box-shadow:
        4px 4px 8px var(--neuro-shadow-dark),
        -4px -4px 8px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .tech-tag:hover {
    box-shadow:
        inset 3px 3px 6px var(--neuro-shadow-dark),
        inset -3px -3px 6px var(--neuro-shadow-light);
}

/* ============================================
   FORMS
   ============================================ */

[data-design-theme="neumorphism"] .form-input,
[data-design-theme="neumorphism"] .form-textarea {
    background: var(--neuro-bg);
    border: none;
    border-radius: 12px;
    box-shadow:
        inset 4px 4px 8px var(--neuro-shadow-dark),
        inset -4px -4px 8px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .form-input:focus,
[data-design-theme="neumorphism"] .form-textarea:focus {
    box-shadow:
        inset 5px 5px 10px var(--neuro-shadow-dark),
        inset -5px -5px 10px var(--neuro-shadow-light),
        0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* ============================================
   FOOTER
   ============================================ */

[data-design-theme="neumorphism"] .footer {
    background: var(--neuro-bg);
    border: none;
    box-shadow:
        0 -4px 6px var(--neuro-shadow-dark),
        0 2px 4px var(--neuro-shadow-light);
}

/* ============================================
   SOCIAL LINKS
   ============================================ */

[data-design-theme="neumorphism"] .social-link {
    background: var(--neuro-bg);
    border: none;
    border-radius: 12px;
    box-shadow:
        5px 5px 10px var(--neuro-shadow-dark),
        -5px -5px 10px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .social-link:hover {
    background: linear-gradient(145deg, #667eea, #5a6dd1);
    box-shadow:
        6px 6px 12px rgba(90, 109, 209, 0.4),
        -6px -6px 12px rgba(102, 126, 234, 0.4);
}

/* ============================================
   TIMELINE
   ============================================ */

[data-design-theme="neumorphism"] .timeline::before {
    background: var(--neuro-bg);
    box-shadow:
        2px 2px 4px var(--neuro-shadow-dark),
        -2px -2px 4px var(--neuro-shadow-light);
    width: 4px;
}

[data-design-theme="neumorphism"] .timeline-item::before {
    background: var(--neuro-bg);
    border: none;
    box-shadow:
        4px 4px 8px var(--neuro-shadow-dark),
        -4px -4px 8px var(--neuro-shadow-light),
        inset 2px 2px 4px rgba(102, 126, 234, 0.3);
}

/* ============================================
   PROJECT LINKS
   ============================================ */

[data-design-theme="neumorphism"] .project-link {
    border-radius: 12px;
    border: none;
}

[data-design-theme="neumorphism"] .project-link-primary {
    background: linear-gradient(145deg, #667eea, #5a6dd1);
    box-shadow:
        5px 5px 10px rgba(90, 109, 209, 0.4),
        -5px -5px 10px rgba(102, 126, 234, 0.4);
}

[data-design-theme="neumorphism"] .project-link-primary:hover {
    box-shadow:
        6px 6px 12px rgba(90, 109, 209, 0.5),
        -6px -6px 12px rgba(102, 126, 234, 0.5);
}

[data-design-theme="neumorphism"] .project-link-secondary {
    background: var(--neuro-bg);
    box-shadow:
        5px 5px 10px var(--neuro-shadow-dark),
        -5px -5px 10px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .project-link-secondary:hover {
    box-shadow:
        6px 6px 12px var(--neuro-shadow-dark),
        -6px -6px 12px var(--neuro-shadow-light);
}

/* ============================================
   BADGES
   ============================================ */

[data-design-theme="neumorphism"] .badge {
    border-radius: 12px;
    border: none;
}

[data-design-theme="neumorphism"] .badge-primary {
    background: linear-gradient(145deg, #667eea, #5a6dd1);
    box-shadow:
        3px 3px 6px rgba(90, 109, 209, 0.3),
        -3px -3px 6px rgba(102, 126, 234, 0.3);
}

/* ============================================
   PROJECT CARD IMAGE
   ============================================ */

[data-design-theme="neumorphism"] .project-card-image {
    border-radius: 16px;
    box-shadow:
        inset 4px 4px 8px var(--neuro-shadow-dark),
        inset -4px -4px 8px var(--neuro-shadow-light);
}

/* ============================================
   THEME TOGGLE
   ============================================ */

[data-design-theme="neumorphism"] .theme-toggle {
    background: var(--neuro-bg);
    border: none;
    border-radius: 12px;
    box-shadow:
        5px 5px 10px var(--neuro-shadow-dark),
        -5px -5px 10px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .theme-toggle:hover {
    box-shadow:
        6px 6px 12px var(--neuro-shadow-dark),
        -6px -6px 12px var(--neuro-shadow-light);
    transform: none;
}

/* ============================================
   SPECIAL EFFECTS
   ============================================ */

/* Pressed state for interactive elements */
[data-design-theme="neumorphism"] .btn:active,
[data-design-theme="neumorphism"] .social-link:active,
[data-design-theme="neumorphism"] .project-link:active {
    transform: scale(0.98);
}

/* Smooth transitions for neumorphic elements */
[data-design-theme="neumorphism"] .card,
[data-design-theme="neumorphism"] .btn,
[data-design-theme="neumorphism"] .skill-badge,
[data-design-theme="neumorphism"] .social-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   REVAMP COMPONENT LAYER
   ============================================ */

[data-design-theme="neumorphism"] .profile-frame,
[data-design-theme="neumorphism"] .signal-card,
[data-design-theme="neumorphism"] .metric-grid,
[data-design-theme="neumorphism"] .os-terminal,
[data-design-theme="neumorphism"] .os-mode-card,
[data-design-theme="neumorphism"] .service-card,
[data-design-theme="neumorphism"] .testimonial-card,
[data-design-theme="neumorphism"] .case-study-card,
[data-design-theme="neumorphism"] .project-preview-panel,
[data-design-theme="neumorphism"] .explorer-toolbar,
[data-design-theme="neumorphism"] .command-dialog,
[data-design-theme="neumorphism"] .collaboration-panel,
[data-design-theme="neumorphism"] .empty-state,
[data-design-theme="neumorphism"] .project-filter-panel,
[data-design-theme="neumorphism"] .project-spec,
[data-design-theme="neumorphism"] .contact-panel,
[data-design-theme="neumorphism"] .contact-form-panel,
[data-design-theme="neumorphism"] .timeline-item,
[data-design-theme="neumorphism"] .theme-panel {
    background: var(--neuro-bg);
    border: none;
    border-radius: 20px;
    box-shadow:
        10px 10px 20px var(--neuro-shadow-dark),
        -10px -10px 20px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .filter-chip,
[data-design-theme="neumorphism"] .tech-tag {
    border: none;
    background: var(--neuro-bg);
    box-shadow:
        4px 4px 8px var(--neuro-shadow-dark),
        -4px -4px 8px var(--neuro-shadow-light);
}

[data-design-theme="neumorphism"] .filter-chip.active {
    background: linear-gradient(145deg, #667eea, #5a6dd1);
    color: #fff;
    box-shadow:
        inset 4px 4px 8px rgba(90, 109, 209, 0.35),
        inset -4px -4px 8px rgba(255, 255, 255, 0.18);
}