1
/* Self-hosted fonts (CDN would be blocked under COEP: require-corp). */
2
@import "@fontsource-variable/hanken-grotesk";
3
@import "@fontsource-variable/jetbrains-mono";
4
@import "tailwindcss";
5
 
6
@theme {
7
  --default-transition-duration: 75ms;
8
 
9
  --font-sans: "Hanken Grotesk Variable", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
10
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
11
 
12
  /* Warm zinc overrides (limic.dev neutral palette). */
13
  --color-zinc-50: #fafaf9;
14
  --color-zinc-100: #f5f4f4;
15
  --color-zinc-200: #e5e4e5;
16
  --color-zinc-300: #d6d4d7;
17
  --color-zinc-400: #a3a1a8;
18
  --color-zinc-500: #747178;
19
  --color-zinc-600: #555259;
20
  --color-zinc-700: #423f42;
21
  --color-zinc-800: #2a2729;
22
  --color-zinc-900: #1b181a;
23
  --color-zinc-950: #0c090b;
24
 
25
  /* Project accent: chartreuse (~110°). */
26
  --color-accent-50: #f3fae3;
27
  --color-accent-100: #e3f4c1;
28
  --color-accent-200: #c9e98e;
29
  --color-accent-300: #a9d957;
30
  --color-accent-400: #88c130;
31
  --color-accent-500: #6fa520;
32
  --color-accent-600: #547d15;
33
  --color-accent-700: #426012;
34
  --color-accent-800: #374e15;
35
  --color-accent-900: #2f4116;
36
 
37
  /* Lifted warm canvas background. */
38
  --color-canvas: #221f21;
39
 
40
  --animate-fade-in: fade-in 0.4s ease-out both;
41
  --animate-slide-up: slide-up 0.35s ease-out both;
42
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
43
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
44
}
45
 
46
@keyframes fade-in {
47
  from {
48
    opacity: 0;
49
  }
50
  to {
51
    opacity: 1;
52
  }
53
}
54
 
55
@keyframes slide-up {
56
  from {
57
    opacity: 0;
58
    transform: translateY(12px);
59
  }
60
  to {
61
    opacity: 1;
62
    transform: translateY(0);
63
  }
64
}
65
 
66
@keyframes scale-fade {
67
  from {
68
    opacity: 0;
69
    transform: scale(0.96);
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
  to {
82
    background-position: 200% 0;
83
  }
84
}
85
 
86
@layer base {
87
  html {
88
    color-scheme: dark;
89
  }
90
 
91
  html,
92
  body,
93
  #root {
94
    height: 100%;
95
  }
96
 
97
  body {
98
    @apply bg-canvas text-zinc-100 antialiased;
99
    margin: 0;
100
    overflow: hidden;
101
    font-family: var(--font-sans);
102
    font-weight: 450;
103
    text-rendering: optimizeLegibility;
104
  }
105
 
106
  button:not(:disabled),
107
  select,
108
  summary,
109
  [role="button"] {
110
    cursor: pointer;
111
  }
112
 
113
  *:focus-visible {
114
    @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
115
  }
116
 
117
  ::selection {
118
    @apply bg-accent-500/[0.28] text-accent-50;
119
  }
120
 
121
  /* Scope scrollbar styling to scrollable containers, not *. */
122
  body,
123
  .overflow-y-auto,
124
  .overflow-auto {
125
    scrollbar-width: thin;
126
    scrollbar-color: var(--color-zinc-700) transparent;
127
  }
128
 
129
  /* Shared range-input styling for the editor sliders. */
130
  input[type="range"] {
131
    -webkit-appearance: none;
132
    appearance: none;
133
    width: 100%;
134
    height: 1.25rem;
135
    background: transparent;
136
    cursor: pointer;
137
  }
138
  input[type="range"]::-webkit-slider-runnable-track {
139
    height: 0.375rem;
140
    border-radius: 999px;
141
    background: var(--color-zinc-800);
142
  }
143
  input[type="range"]::-moz-range-track {
144
    height: 0.375rem;
145
    border-radius: 999px;
146
    background: var(--color-zinc-800);
147
  }
148
  input[type="range"]::-webkit-slider-thumb {
149
    -webkit-appearance: none;
150
    appearance: none;
151
    margin-top: -0.3125rem;
152
    height: 1rem;
153
    width: 1rem;
154
    border-radius: 999px;
155
    background: var(--color-zinc-100);
156
    border: 2px solid var(--color-accent-500);
157
    transition: transform 0.1s ease;
158
  }
159
  input[type="range"]::-webkit-slider-thumb:active {
160
    transform: scale(1.15);
161
  }
162
  input[type="range"]::-moz-range-thumb {
163
    height: 1rem;
164
    width: 1rem;
165
    border-radius: 999px;
166
    background: var(--color-zinc-100);
167
    border: 2px solid var(--color-accent-500);
168
  }
169
  input[type="range"]:disabled {
170
    opacity: 0.4;
171
    cursor: not-allowed;
172
  }
173
}
174
 
175
@layer utilities {
176
  /* Subtle warm checkerboard for transparent-image backdrops. */
177
  .bg-checker {
178
    background-color: #1b181a;
179
    background-image:
180
      linear-gradient(45deg, #2a2729 25%, transparent 25%), linear-gradient(-45deg, #2a2729 25%, transparent 25%),
181
      linear-gradient(45deg, transparent 75%, #2a2729 75%), linear-gradient(-45deg, transparent 75%, #2a2729 75%);
182
    background-size: 20px 20px;
183
    background-position:
184
      0 0,
185
      0 10px,
186
      10px -10px,
187
      -10px 0;
188
  }
189
}
190
 
191
@media (prefers-reduced-motion: reduce) {
192
  *,
193
  *::before,
194
  *::after {
195
    animation-duration: 0.01ms !important;
196
    animation-iteration-count: 1 !important;
197
    transition-duration: 0.01ms !important;
198
    scroll-behavior: auto !important;
199
  }
200
}