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: "Fraunces", ui-serif, Georgia, serif;
8
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
9
 
10
  /* Warm zinc overrides -- see frontend-spec.md §4 */
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
  /* dab accent: coral-magenta, hue ~325° */
24
  --color-accent-50: #fdf2f8;
25
  --color-accent-100: #fce7f3;
26
  --color-accent-200: #fbcfe8;
27
  --color-accent-300: #f9a8d4;
28
  --color-accent-400: #f06da6;
29
  --color-accent-500: #db3a8b;
30
  --color-accent-600: #b8226e;
31
  --color-accent-700: #941b58;
32
  --color-accent-800: #76174a;
33
  --color-accent-900: #5b143b;
34
 
35
  /* Lifted warm canvas background */
36
  --color-canvas: #221f21;
37
 
38
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
39
  --animate-slide-up: slide-up 0.35s ease-out both;
40
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
41
}
42
 
43
@keyframes scale-fade {
44
  from {
45
    opacity: 0;
46
    transform: scale(0.96);
47
  }
48
 
49
  to {
50
    opacity: 1;
51
    transform: scale(1);
52
  }
53
}
54
 
55
@keyframes slide-up {
56
  from {
57
    opacity: 0;
58
    transform: translateY(12px);
59
  }
60
 
61
  to {
62
    opacity: 1;
63
    transform: translateY(0);
64
  }
65
}
66
 
67
@keyframes shimmer {
68
  from {
69
    background-position: -200% 0;
70
  }
71
 
72
  to {
73
    background-position: 200% 0;
74
  }
75
}
76
 
77
html {
78
  color-scheme: dark;
79
}
80
 
81
html,
82
body {
83
  min-height: 100vh;
84
}
85
 
86
body {
87
  @apply bg-canvas text-zinc-100 antialiased;
88
  font-weight: 450;
89
}
90
 
91
#root {
92
  min-height: 100vh;
93
}
94
 
95
button:not(:disabled),
96
select,
97
summary,
98
[role="button"] {
99
  cursor: pointer;
100
}
101
 
102
::selection {
103
  @apply bg-accent-500/[0.28] text-accent-50;
104
}
105
 
106
@layer base {
107
  html,
108
  body,
109
  .overflow-y-auto,
110
  .overflow-auto,
111
  .tiptap pre,
112
  .tableWrapper {
113
    scrollbar-width: thin;
114
    scrollbar-color: var(--color-zinc-700) transparent;
115
  }
116
 
117
  html::-webkit-scrollbar,
118
  body::-webkit-scrollbar,
119
  .overflow-y-auto::-webkit-scrollbar,
120
  .overflow-auto::-webkit-scrollbar,
121
  .tiptap pre::-webkit-scrollbar,
122
  .tableWrapper::-webkit-scrollbar {
123
    width: 6px;
124
    height: 6px;
125
  }
126
 
127
  html::-webkit-scrollbar-track,
128
  body::-webkit-scrollbar-track,
129
  .overflow-y-auto::-webkit-scrollbar-track,
130
  .overflow-auto::-webkit-scrollbar-track,
131
  .tiptap pre::-webkit-scrollbar-track,
132
  .tableWrapper::-webkit-scrollbar-track {
133
    background: transparent;
134
  }
135
 
136
  html::-webkit-scrollbar-thumb,
137
  body::-webkit-scrollbar-thumb,
138
  .overflow-y-auto::-webkit-scrollbar-thumb,
139
  .overflow-auto::-webkit-scrollbar-thumb,
140
  .tiptap pre::-webkit-scrollbar-thumb,
141
  .tableWrapper::-webkit-scrollbar-thumb {
142
    background-color: var(--color-zinc-700);
143
    border-radius: 3px;
144
  }
145
 
146
  html::-webkit-scrollbar-thumb:hover,
147
  body::-webkit-scrollbar-thumb:hover,
148
  .overflow-y-auto::-webkit-scrollbar-thumb:hover,
149
  .overflow-auto::-webkit-scrollbar-thumb:hover,
150
  .tiptap pre::-webkit-scrollbar-thumb:hover,
151
  .tableWrapper::-webkit-scrollbar-thumb:hover {
152
    background-color: var(--color-zinc-600);
153
  }
154
}
155
 
156
*:focus-visible {
157
  @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
158
}
159
 
160
@media (prefers-reduced-motion: reduce) {
161
  *,
162
  *::before,
163
  *::after {
164
    animation-duration: 0.01ms !important;
165
    animation-iteration-count: 1 !important;
166
    transition-duration: 0.01ms !important;
167
    scroll-behavior: auto !important;
168
  }
169
}