@import "tailwindcss";

@theme {
    --color-primary: var(--primary-color);
}

/* 省略：:root や data-theme, body などは外に出したまま */

@layer components {
    .app-gradient { 
        background: var(--primary-gradient); 
    }
    
    .glass-card { 
        background: rgba(255, 255, 255, 0.9); 
        backdrop-filter: blur(10px); 
    }
    
    .btn-bounce:active { 
        transform: scale(0.95); 
    }
    
    .page-fade { 
        animation: fadeIn 0.3s ease-in-out; 
    }

    .flip-card { 
        perspective: 1000px; 
    }
    
    .flip-card-inner { 
        transition: transform 0.6s; 
        transform-style: preserve-3d; 
    }
    
    .flipped { 
        transform: rotateY(180deg); 
    }
    
    .flip-card-front, .flip-card-back { 
        backface-visibility: hidden; 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
    }
    
    .flip-card-back { 
        transform: rotateY(180deg); 
    }

    .custom-scrollbar::-webkit-scrollbar { 
        width: 6px; 
    }
    
    .custom-scrollbar::-webkit-scrollbar-track { 
        background: transparent; 
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb { 
        background: #e2e8f0; 
        border-radius: 10px; 
    }
}