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-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
8
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
9
 
10
  /* Warm zinc overrides -- see Section 4 Neutral Palette */
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: #eff7ff;
24
  --color-accent-100: #daecfe;
25
  --color-accent-200: #beddfd;
26
  --color-accent-300: #91c5fa;
27
  --color-accent-400: #56a6f3;
28
  --color-accent-500: #3392ee;
29
  --color-accent-600: #1a75d4;
30
  --color-accent-700: #155eae;
31
  --color-accent-800: #154d8e;
32
  --color-accent-900: #154073;
33
 
34
  /* Lifted warm canvas background -- see Surface Hierarchy */
35
  --color-canvas: #221f21;
36
 
37
  --animate-fade-in: fade-in 0.4s ease-out both;
38
  --animate-slide-up: slide-up 0.35s ease-out both;
39
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
40
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
41
}
42
 
43
@keyframes fade-in {
44
  from {
45
    opacity: 0;
46
  }
47
 
48
  to {
49
    opacity: 1;
50
  }
51
}
52
 
53
@keyframes slide-up {
54
  from {
55
    opacity: 0;
56
    transform: translateY(12px);
57
  }
58
 
59
  to {
60
    opacity: 1;
61
    transform: translateY(0);
62
  }
63
}
64
 
65
@keyframes scale-fade {
66
  from {
67
    opacity: 0;
68
    transform: scale(0.96);
69
  }
70
 
71
  to {
72
    opacity: 1;
73
    transform: scale(1);
74
  }
75
}
76
 
77
@keyframes shimmer {
78
  from {
79
    background-position: -200% 0;
80
  }
81
 
82
  to {
83
    background-position: 200% 0;
84
  }
85
}
86
 
87
html {
88
  color-scheme: dark;
89
}
90
 
91
html,
92
body {
93
  min-height: 100vh;
94
}
95
 
96
body {
97
  @apply bg-canvas text-zinc-100 antialiased;
98
  font-weight: 450;
99
}
100
 
101
#root {
102
  min-height: 100vh;
103
}
104
 
105
button:not(:disabled),
106
select,
107
summary,
108
[role="button"] {
109
  cursor: pointer;
110
}
111
 
112
::selection {
113
  @apply bg-accent-500/[0.28] text-accent-50;
114
}
115
 
116
/* Scope scrollbar styling to scrollable containers, not * */
117
body,
118
.overflow-y-auto,
119
.overflow-auto {
120
  scrollbar-width: thin;
121
  scrollbar-color: theme(--color-zinc-700) transparent;
122
}
123
 
124
*:focus-visible {
125
  @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
126
}
127
 
128
@media (prefers-reduced-motion: reduce) {
129
  *,
130
  *::before,
131
  *::after {
132
    animation-duration: 0.01ms !important;
133
    animation-iteration-count: 1 !important;
134
    transition-duration: 0.01ms !important;
135
    scroll-behavior: auto !important;
136
  }
137
}