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
 
9
  /* Warm zinc overrides */
10
  --color-zinc-50: #fafaf9;
11
  --color-zinc-100: #f5f4f4;
12
  --color-zinc-200: #e5e4e5;
13
  --color-zinc-300: #d6d4d7;
14
  --color-zinc-400: #a3a1a8;
15
  --color-zinc-500: #747178;
16
  --color-zinc-600: #555259;
17
  --color-zinc-700: #423f42;
18
  --color-zinc-800: #2a2729;
19
  --color-zinc-900: #1b181a;
20
  --color-zinc-950: #0c090b;
21
 
22
  /* Dusty rose accent palette */
23
  --color-accent-50: #fdf4f5;
24
  --color-accent-100: #fbe7ea;
25
  --color-accent-200: #f5cdd3;
26
  --color-accent-300: #eeadb7;
27
  --color-accent-400: #df8691;
28
  --color-accent-500: #c96f7a;
29
  --color-accent-600: #a85a65;
30
  --color-accent-700: #8c4750;
31
  --color-accent-800: #743c43;
32
  --color-accent-900: #613338;
33
 
34
  /* Lifted warm canvas background */
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
  --animate-spinner: spinner 0.8s linear infinite;
42
}
43
 
44
@keyframes fade-in {
45
  from {
46
    opacity: 0;
47
  }
48
  to {
49
    opacity: 1;
50
  }
51
}
52
 
53
@keyframes slide-up {
54
  from {
55
    opacity: 0;
56
    transform: translateY(12px);
57
  }
58
  to {
59
    opacity: 1;
60
    transform: translateY(0);
61
  }
62
}
63
 
64
@keyframes scale-fade {
65
  from {
66
    opacity: 0;
67
    transform: scale(0.96);
68
  }
69
  to {
70
    opacity: 1;
71
    transform: scale(1);
72
  }
73
}
74
 
75
@keyframes shimmer {
76
  from {
77
    background-position: -200% 0;
78
  }
79
  to {
80
    background-position: 200% 0;
81
  }
82
}
83
 
84
@keyframes spinner {
85
  to {
86
    transform: rotate(360deg);
87
  }
88
}
89
 
90
html {
91
  color-scheme: dark;
92
}
93
html,
94
body {
95
  min-height: 100vh;
96
}
97
 
98
body {
99
  @apply bg-canvas text-zinc-100 antialiased;
100
  font-weight: 450;
101
}
102
 
103
#root {
104
  min-height: 100vh;
105
}
106
 
107
button:not(:disabled),
108
select,
109
summary,
110
[role="button"] {
111
  cursor: pointer;
112
}
113
 
114
*:focus-visible {
115
  @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
116
}
117
 
118
::selection {
119
  @apply bg-accent-500/[0.28] text-accent-50;
120
}
121
 
122
/* Scope scrollbar styling to scrollable containers */
123
body,
124
.overflow-y-auto,
125
.overflow-auto {
126
  scrollbar-width: thin;
127
  scrollbar-color: theme(--color-zinc-700) transparent;
128
}
129
 
130
@media (prefers-reduced-motion: reduce) {
131
  *,
132
  *::before,
133
  *::after {
134
    animation-duration: 0.01ms !important;
135
    animation-iteration-count: 1 !important;
136
    transition-duration: 0.01ms !important;
137
    scroll-behavior: auto !important;
138
  }
139
}
140
 
141
/* ghostty-web terminal overrides */
142
.terminal-pane {
143
  caret-color: transparent;
144
  cursor: default;
145
}
146
 
147
.terminal-pane canvas {
148
  cursor: text;
149
}
150
 
151
.terminal-pane *:focus {
152
  outline: none;
153
  caret-color: transparent;
154
}
155
 
156
/* Suppress focus-visible ring inside terminal (ghostty manages its own focus) */
157
.terminal-pane *:focus-visible {
158
  outline: none;
159
  box-shadow: none;
160
  --tw-ring-shadow: none;
161
}