blob: 2c10cfedf5b4b5f6d37de09d216015b53178ac2d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
@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;
}
|
