@import "tailwindcss";

@theme {
	/* Color palette - Warm minimal Japanese aesthetic */
	--color-cream: #faf9f6;
	--color-ivory: #f5f4f0;
	--color-ink: #1a1a1a;
	--color-slate: #334155;
	--color-muted: #94a3b8;
	--color-border: #e2e0dc;

	/* Primary - Deep teal */
	--color-primary: #1a535c;
	--color-primary-dark: #0f3439;
	--color-primary-light: #2a7a87;

	/* Rating colors */
	--color-again: #dc2626;
	--color-hard: #ea580c;
	--color-good: #16a34a;
	--color-easy: #2563eb;

	/* Semantic colors */
	--color-success: #059669;
	--color-warning: #d97706;
	--color-error: #c43535;
	--color-info: #2563eb;

	/* Typography */
	--font-display: "Fraunces", "Georgia", serif;
	--font-body: "DM Sans", system-ui, sans-serif;

	/* Border radius */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.5rem;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
	--shadow-md:
		0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--shadow-lg:
		0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
	--shadow-card:
		0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);

	/* Animation */
	--animate-fade-in: fade-in 0.3s ease-out;
	--animate-slide-up: slide-up 0.3s ease-out;
	--animate-scale-in: scale-in 0.2s ease-out;
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slide-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scale-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Base styles */
html {
	font-family: var(--font-body);
	background-color: var(--color-cream);
	color: var(--color-slate);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	min-height: 100vh;
}

/* Focus styles */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

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

::-webkit-scrollbar-track {
	background: var(--color-ivory);
}

::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-muted);
}

/* Selection */
::selection {
	background-color: var(--color-primary);
	color: white;
}