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