@tailwind base;
@tailwind components;
@tailwind utilities;

/* Nordic Design System for NotDAX */
@layer base {
    body {
        font-family:
            "Inter var",
            "Inter",
            system-ui,
            -apple-system,
            sans-serif;
    }
}

@layer components {
    /* Nordic Color Palette */
    .nordic-bg-primary {
        @apply bg-gray-50;
    }
    .nordic-bg-secondary {
        @apply bg-white;
    }
    .nordic-bg-accent {
        @apply bg-purple-50;
    }

    .nordic-text-primary {
        @apply text-gray-900;
    }
    .nordic-text-secondary {
        @apply text-gray-600;
    }
    .nordic-text-muted {
        @apply text-gray-500;
    }
    .nordic-text-accent {
        @apply text-purple-600;
    }

    /* Nordic Form Components */
    .nordic-input {
        @apply w-full px-4 py-3 border border-gray-200 rounded-lg
           focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent
           transition-all duration-200 text-gray-900 placeholder-gray-400
           bg-white hover:border-gray-300;
    }

    .nordic-input:focus {
        transform: translateY(-1px);
        box-shadow:
            0 0 0 3px rgba(147, 51, 234, 0.1),
            0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .nordic-label {
        @apply block text-sm font-medium text-gray-700 mb-2;
    }

    /* Nordic Button Components */
    .nordic-btn-primary {
        @apply w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold
           py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-[1.02]
           focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2
           shadow-lg active:scale-[0.98];
    }

    .nordic-btn-secondary {
        @apply px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700
           rounded-lg transition-all duration-200 font-medium;
    }

    .nordic-btn-link {
        @apply text-purple-600 hover:text-purple-700 font-medium
           transition-colors duration-200 text-sm;
    }

    /* Nordic Card Components */
    .nordic-card {
        @apply bg-white rounded-2xl shadow-xl border border-gray-100 p-8;
    }

    .nordic-card-subtle {
        @apply bg-gradient-to-br from-gray-50 to-purple-50 rounded-lg
           shadow-md p-6 border border-purple-100;
    }

    /* Nordic Layout Components */
    .nordic-container {
        @apply min-h-screen w-full flex items-center justify-center
           bg-gradient-to-br from-gray-50 via-white to-purple-50;
    }

    .nordic-divider {
        @apply w-12 h-0.5 bg-purple-600 mx-auto;
    }

    /* Nordic Typography */
    .nordic-heading-xl {
        @apply text-3xl font-bold text-gray-900 tracking-tight;
    }

    .nordic-heading-lg {
        @apply text-2xl font-semibold text-gray-900;
    }

    .nordic-heading-md {
        @apply text-xl font-semibold text-gray-800;
    }

    .nordic-body {
        @apply text-gray-600 leading-relaxed;
    }

    .nordic-caption {
        @apply text-xs text-gray-500 tracking-wide;
    }

    /* Nordic Form Layouts */
    .nordic-form-group {
        @apply mb-6;
    }

    .nordic-form-row {
        @apply flex items-center justify-between mb-6;
    }

    .nordic-checkbox {
        @apply h-4 w-4 text-purple-600 border-gray-300 rounded
           focus:ring-purple-500 focus:ring-2;
    }

    /* Nordic Status Indicators */
    .nordic-status-success {
        @apply bg-green-50 text-green-800 px-3 py-2 rounded-lg border border-green-200;
    }

    .nordic-status-error {
        @apply bg-red-50 text-red-800 px-3 py-2 rounded-lg border border-red-200;
    }

    .nordic-status-info {
        @apply bg-purple-50 text-purple-800 px-3 py-2 rounded-lg border border-purple-200;
    }

    /* Nordic Animation Utilities */
    .nordic-hover-lift {
        @apply transition-transform duration-200 hover:-translate-y-0.5;
    }

    .nordic-fade-in {
        @apply opacity-0 animate-fadeIn;
    }
}

/* Custom Nordic Animations */
@layer utilities {
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fadeIn {
        animation: fadeIn 0.5s ease-out forwards;
    }

    /* Nordic Gradient Backgrounds */
    .nordic-gradient-subtle {
        background: linear-gradient(
            135deg,
            #f9fafb 0%,
            #ffffff 50%,
            #faf5ff 100%
        );
    }

    .nordic-gradient-accent {
        background: linear-gradient(
            135deg,
            #f3f4f6 0%,
            #f9fafb 50%,
            #f3e8ff 100%
        );
    }

    /* Nordic Header Components */
    .nordic-header {
        @apply fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm
               border-b border-gray-100 shadow-sm;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Header spacing compensation */
    .nordic-header-spacer {
        @apply h-16;
    }

    /* Backdrop blur support */
    .nordic-backdrop-blur {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .nordic-logo {
        @apply w-8 h-8 bg-gradient-to-br from-purple-600 to-purple-700
               rounded-lg flex items-center justify-center;
    }

    .nordic-nav-link {
        @apply text-sm font-medium transition-colors duration-200
               hover:text-purple-600 relative;
    }

    .nordic-nav-link.active {
        @apply text-purple-600 font-semibold;
    }

    .nordic-nav-link.active::after {
        content: "";
        @apply absolute -bottom-1 left-0 right-0 h-0.5 bg-purple-600 rounded-full;
    }

    .nordic-user-menu {
        @apply relative;
    }

    .nordic-dropdown {
        @apply absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-xl
               border border-gray-100 py-2 opacity-0 invisible
               transition-all duration-200 transform scale-95;
    }

    .nordic-user-menu:hover .nordic-dropdown {
        @apply opacity-100 visible scale-100;
    }

    .nordic-dropdown-item {
        @apply flex items-center px-4 py-2 text-sm text-gray-700
               hover:bg-gray-50 hover:text-gray-900 transition-colors cursor-pointer;
    }

    .nordic-dropdown-divider {
        @apply border-t border-gray-100 my-2;
    }

    .nordic-mobile-menu {
        @apply md:hidden bg-white border-t border-gray-100;
    }

    /* Nordic Avatar */
    .nordic-avatar {
        @apply w-6 h-6 bg-gradient-to-br from-purple-600 to-purple-700
               rounded-full flex items-center justify-center text-white text-xs font-semibold;
    }

    .nordic-avatar-lg {
        @apply w-8 h-8 bg-gradient-to-br from-purple-600 to-purple-700
               rounded-full flex items-center justify-center text-white text-sm font-semibold;
    }

    /* Mobile menu animations */
    .nordic-mobile-menu-enter {
        @apply transform transition-all duration-300 ease-out;
        opacity: 0;
        transform: translateY(-10px);
    }

    .nordic-mobile-menu-enter-active {
        @apply opacity-100;
        transform: translateY(0);
    }

    /* Header glass effect */
    .nordic-glass {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Mobile-specific Nordic components */
    .nordic-mobile-nav-link {
        @apply block py-3 px-4 text-base font-medium text-gray-700
               hover:text-purple-600 hover:bg-purple-50 rounded-lg
               transition-all duration-200 border-l-4 border-transparent
               hover:border-purple-300;
    }

    .nordic-mobile-nav-link.active {
        @apply text-purple-600 bg-purple-50 border-purple-500 font-semibold;
    }

    .nordic-mobile-auth-section {
        @apply pt-6 mt-6 border-t border-gray-200 space-y-3;
    }

    .nordic-mobile-user-info {
        @apply flex items-center space-x-3 p-4 bg-gradient-to-r
               from-purple-50 to-gray-50 rounded-lg;
    }

    /* Touch-friendly button sizing for mobile */
    .nordic-btn-mobile {
        @apply py-3 px-4 text-base font-medium rounded-lg
               transition-all duration-200 touch-manipulation;
        min-height: 44px; /* iOS touch target requirement */
    }

    .nordic-btn-mobile-primary {
        @apply nordic-btn-mobile bg-purple-600 hover:bg-purple-700
               text-white shadow-lg hover:shadow-xl
               transform hover:scale-[1.02] active:scale-[0.98];
    }

    .nordic-btn-mobile-secondary {
        @apply nordic-btn-mobile bg-gray-100 hover:bg-gray-200
               text-gray-700 border border-gray-200;
    }

    /* Responsive typography for mobile */
    .nordic-text-mobile-lg {
        @apply text-lg font-semibold text-gray-900;
    }

    .nordic-text-mobile-base {
        @apply text-base text-gray-700;
    }

    .nordic-text-mobile-sm {
        @apply text-sm text-gray-600;
    }

    /* Mobile-optimized spacing */
    .nordic-mobile-section {
        @apply px-4 py-6 space-y-4;
    }

    .nordic-mobile-container {
        @apply w-full max-w-md mx-auto px-4;
    }

    /* Trading Page Specific Styles */
    .nordic-crypto-icon {
        @apply w-8 h-8 bg-gradient-to-br from-blue-500 to-indigo-600
               rounded-full flex items-center justify-center text-white text-xs font-bold;
    }

    .nordic-crypto-icon-sm {
        @apply w-6 h-6 bg-gradient-to-br from-blue-500 to-indigo-600
               rounded-full flex items-center justify-center text-white text-xs font-bold;
    }

    .nordic-trading-panel {
        @apply bg-white rounded-xl shadow-lg border border-gray-200 p-6;
    }

    .nordic-order-book-item {
        @apply flex justify-between items-center py-1 px-2 text-sm
               hover:bg-gray-50 transition-colors cursor-pointer;
    }

    .nordic-price-up {
        @apply text-green-600 font-medium;
    }

    .nordic-price-down {
        @apply text-red-600 font-medium;
    }

    .nordic-price-neutral {
        @apply text-gray-600 font-medium;
    }

    /* Portfolio Page Specific Styles */
    .nordic-allocation-bar {
        @apply w-full h-2 bg-gray-200 rounded-full overflow-hidden;
    }

    .nordic-allocation-fill {
        @apply h-full bg-blue-500 rounded-full transition-all duration-300;
    }

    .nordic-performance-card {
        @apply text-center p-3 bg-gray-50 rounded-lg border border-gray-200;
    }

    .nordic-holding-row {
        @apply hover:bg-gray-50 transition-colors cursor-pointer;
    }

    .nordic-profit {
        @apply text-green-600 font-semibold;
    }

    .nordic-loss {
        @apply text-red-600 font-semibold;
    }

    /* Markets Page Specific Styles */
    .nordic-market-row {
        @apply hover:bg-gray-50 transition-colors;
    }

    .nordic-change-badge-positive {
        @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
               bg-green-100 text-green-800;
    }

    .nordic-change-badge-negative {
        @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
               bg-red-100 text-red-800;
    }

    .nordic-change-badge-neutral {
        @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium
               bg-gray-100 text-gray-800;
    }

    .nordic-trending-item {
        @apply flex items-center justify-between p-3 bg-gray-50 rounded-lg
               hover:bg-gray-100 transition-colors cursor-pointer;
    }

    .nordic-category-card {
        @apply p-3 border border-gray-200 rounded-lg hover:bg-gray-50
               transition-colors cursor-pointer;
    }

    /* Chart and Data Visualization */
    .nordic-chart-container {
        @apply h-80 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg
               flex items-center justify-center border-2 border-dashed border-gray-200;
    }

    .nordic-chart-placeholder {
        @apply text-center text-gray-500;
    }

    /* Table Styles */
    .nordic-table {
        @apply w-full divide-y divide-gray-200;
    }

    .nordic-table thead {
        @apply bg-gray-50;
    }

    .nordic-table th {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500
               uppercase tracking-wider;
    }

    .nordic-table td {
        @apply px-6 py-4 whitespace-nowrap text-sm;
    }

    .nordic-table tbody tr {
        @apply hover:bg-gray-50 transition-colors;
    }

    /* Status and Badge Components */
    .nordic-status-filled {
        @apply bg-green-100 text-green-800;
    }

    .nordic-status-pending {
        @apply bg-yellow-100 text-yellow-800;
    }

    .nordic-status-cancelled {
        @apply bg-red-100 text-red-800;
    }

    .nordic-order-buy {
        @apply bg-green-100 text-green-800;
    }

    .nordic-order-sell {
        @apply bg-red-100 text-red-800;
    }

    /* Responsive Grid Layouts */
    .nordic-grid-auto {
        @apply grid gap-6;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .nordic-grid-trading {
        @apply grid grid-cols-1 xl:grid-cols-3 gap-6;
    }

    .nordic-grid-portfolio {
        @apply grid grid-cols-1 xl:grid-cols-3 gap-6;
    }

    .nordic-grid-markets {
        @apply grid grid-cols-1 xl:grid-cols-4 gap-6;
    }

    /* Quick Action Buttons */
    .nordic-quick-action {
        @apply w-full py-2 px-4 text-sm font-medium rounded-lg
               transition-all duration-200 text-center;
    }

    .nordic-quick-action-primary {
        @apply nordic-quick-action bg-purple-600 hover:bg-purple-700
               text-white shadow-sm hover:shadow-md;
    }

    .nordic-quick-action-secondary {
        @apply nordic-quick-action bg-gray-100 hover:bg-gray-200
               text-gray-700 border border-gray-200;
    }

    /* Market Statistics */
    .nordic-stat-card {
        @apply text-center p-4 bg-white rounded-lg border border-gray-200;
    }

    .nordic-stat-value {
        @apply text-2xl font-bold text-gray-900;
    }

    .nordic-stat-label {
        @apply text-sm text-gray-500;
    }

    /* Fear & Greed Index */
    .nordic-fear-greed-bar {
        @apply w-full h-2 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500
               rounded-full overflow-hidden;
    }

    .nordic-fear-greed-indicator {
        @apply h-full bg-white rounded-full border-2 border-gray-800;
        width: 4px;
    }

    /* Loading States */
    .nordic-skeleton {
        @apply animate-pulse bg-gray-200 rounded;
    }

    .nordic-loading-text {
        @apply nordic-skeleton h-4 w-24;
    }

    .nordic-loading-price {
        @apply nordic-skeleton h-6 w-20;
    }

    /* Utility Classes for Financial Data */
    .nordic-currency {
        @apply font-mono text-sm;
    }

    .nordic-percentage {
        @apply font-semibold text-sm;
    }

    .nordic-market-cap {
        @apply text-sm font-medium;
    }

    .nordic-volume {
        @apply text-sm text-gray-600;
    }
}