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

:root {
	--sidebar-width: 260px;
}

body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: linear-gradient(135deg, #fefcf8 0%, #faf7f2 100%);
	min-height: 100vh;
	color: #1a1a2e;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Modern card styling */
.card {
	@apply rounded-xl shadow-card border border-amber-200/60;
	background: linear-gradient(135deg, #fdf8f3 0%, #faf5ee 100%);
}

/* Gradient buttons */
.btn-primary {
	@apply bg-gradient-to-r from-primary-500 to-primary-600 text-white font-medium py-2.5 px-5 rounded-xl shadow-soft hover:shadow-elevated transition-all duration-200 hover:-translate-y-0.5;
}

.btn-secondary {
	@apply bg-white text-surface-700 font-medium py-2.5 px-5 rounded-xl border border-surface-200 shadow-soft hover:bg-surface-50 hover:border-surface-300 transition-all duration-200;
}

/* Input styling */
.input {
	@apply w-full bg-surface-50 border border-surface-200 rounded-lg px-3 py-2 text-sm text-surface-800 placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all duration-200;
}

.select {
	@apply w-full bg-surface-50 border border-surface-200 rounded-lg px-3 py-2 text-sm text-surface-800 focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 transition-all duration-200 appearance-none cursor-pointer;
}

/* Label styling */
.label {
	@apply block text-xs font-semibold text-surface-600 mb-1;
}

/* Badge styling */
.badge {
	@apply inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium;
}

.badge-openai {
	@apply bg-emerald-50 text-emerald-700 border border-emerald-200;
}

.badge-anthropic {
	@apply bg-amber-50 text-amber-700 border border-amber-200;
}

.badge-google {
	@apply bg-blue-50 text-blue-700 border border-blue-200;
}

.badge-custom {
	@apply bg-purple-50 text-purple-700 border border-purple-200;
}

/* Table styling */
.table-modern {
	@apply w-full text-sm;
}

.table-modern thead {
	@apply bg-surface-50;
}

.table-modern th {
	@apply px-4 py-3 text-left text-xs font-semibold text-surface-500 uppercase tracking-wider;
}

.table-modern td {
	@apply px-4 py-3 border-t border-surface-100;
}

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

/* Stat card */
.stat-card {
	@apply bg-gradient-to-br from-surface-50 to-white rounded-lg p-3 border border-surface-100;
}

.stat-value {
	@apply text-3xl font-bold bg-gradient-to-r from-primary-600 to-accent-600 bg-clip-text text-transparent;
}

.stat-label {
	@apply text-sm text-surface-500 font-medium;
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #d4d4d8;
	border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
	background: #a1a1aa;
}

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

.animate-fade-in {
	animation: fadeIn 0.3s ease-out;
}

/* Link styling */
.link {
	@apply text-primary-600 hover:text-primary-700 font-medium transition-colors;
}

/* Section header */
.section-header {
	@apply text-lg font-bold text-surface-800 mb-4;
}

.section-subheader {
	@apply text-surface-500 text-sm;
}
