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