1
@import "tailwindcss";
2
 
3
@theme {
4
  --default-transition-duration: 75ms;
5
 
6
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
7
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
8
  --font-display: "Space Grotesk", sans-serif;
9
 
10
  /* Warm zinc overrides */
11
  --color-zinc-50: #fafaf9;
12
  --color-zinc-100: #f5f4f4;
13
  --color-zinc-200: #e5e4e5;
14
  --color-zinc-300: #d6d4d7;
15
  --color-zinc-400: #a3a1a8;
16
  --color-zinc-500: #747178;
17
  --color-zinc-600: #555259;
18
  --color-zinc-700: #423f42;
19
  --color-zinc-800: #2a2729;
20
  --color-zinc-900: #1b181a;
21
  --color-zinc-950: #0c090b;
22
 
23
  --color-accent-50: #fff7ed;
24
  --color-accent-100: #ffedd5;
25
  --color-accent-200: #fed7aa;
26
  --color-accent-300: #fdba74;
27
  --color-accent-400: #fb923c;
28
  --color-accent-500: #f97316;
29
  --color-accent-600: #ea580c;
30
  --color-accent-700: #c2410c;
31
  --color-accent-800: #9a3412;
32
  --color-accent-900: #7c2d12;
33
 
34
  --color-canvas: #221f21;
35
 
36
  --animate-fade-in: fade-in 0.4s ease-out both;
37
  --animate-slide-up: slide-up 0.35s ease-out both;
38
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
39
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
40
}
41
 
42
@keyframes fade-in {
43
  from {
44
    opacity: 0;
45
  }
46
  to {
47
    opacity: 1;
48
  }
49
}
50
 
51
@keyframes slide-up {
52
  from {
53
    opacity: 0;
54
    transform: translateY(12px);
55
  }
56
  to {
57
    opacity: 1;
58
    transform: translateY(0);
59
  }
60
}
61
 
62
@keyframes scale-fade {
63
  from {
64
    opacity: 0;
65
    transform: scale(0.96);
66
  }
67
  to {
68
    opacity: 1;
69
    transform: scale(1);
70
  }
71
}
72
 
73
@keyframes shimmer {
74
  from {
75
    background-position: -200% 0;
76
  }
77
  to {
78
    background-position: 200% 0;
79
  }
80
}
81
 
82
html {
83
  color-scheme: dark;
84
}
85
 
86
html,
87
body {
88
  min-height: 100vh;
89
}
90
 
91
body {
92
  @apply bg-canvas text-zinc-100 antialiased;
93
  font-weight: 450;
94
}
95
 
96
#root {
97
  min-height: 100vh;
98
}
99
 
100
button:not(:disabled),
101
select,
102
summary,
103
[role="button"] {
104
  cursor: pointer;
105
}
106
 
107
*:focus-visible {
108
  @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
109
}
110
 
111
::selection {
112
  @apply bg-accent-500/[0.28] text-accent-50;
113
}
114
 
115
/* Scope scrollbar styling to scrollable containers, not * */
116
body,
117
.overflow-y-auto,
118
.overflow-auto {
119
  scrollbar-width: thin;
120
  scrollbar-color: theme(--color-zinc-700) transparent;
121
}
122
 
123
@media (prefers-reduced-motion: reduce) {
124
  *,
125
  *::before,
126
  *::after {
127
    animation-duration: 0.01ms !important;
128
    animation-iteration-count: 1 !important;
129
    transition-duration: 0.01ms !important;
130
    scroll-behavior: auto !important;
131
  }
132
}