| 1 | /* Tailwind CSS v4 - loaded via local package imports */ |
| 2 | @import "tailwindcss/theme.css" layer(theme); |
| 3 | @import "tailwindcss/preflight.css" layer(base); |
| 4 | @import "tailwindcss/utilities.css" layer(utilities); |
| 5 | |
| 6 | @font-face { |
| 7 | font-family: "Elms Sans"; |
| 8 | src: url("./assets/fonts/ElmsSans-Light.ttf") format("truetype"); |
| 9 | font-weight: 300; |
| 10 | font-style: normal; |
| 11 | font-display: swap; |
| 12 | } |
| 13 | |
| 14 | @font-face { |
| 15 | font-family: "Elms Sans"; |
| 16 | src: url("./assets/fonts/ElmsSans-Regular.ttf") format("truetype"); |
| 17 | font-weight: 400; |
| 18 | font-style: normal; |
| 19 | font-display: swap; |
| 20 | } |
| 21 | |
| 22 | @font-face { |
| 23 | font-family: "Elms Sans"; |
| 24 | src: url("./assets/fonts/ElmsSans-Bold.ttf") format("truetype"); |
| 25 | font-weight: 700; |
| 26 | font-style: normal; |
| 27 | font-display: swap; |
| 28 | } |
| 29 | |
| 30 | /* Custom theme */ |
| 31 | @theme { |
| 32 | --color-background: #f5f1e8; |
| 33 | --color-foreground: #3e4a32; |
| 34 | --color-card: rgba(255, 251, 244, 0.88); |
| 35 | --color-card-foreground: #3e4a32; |
| 36 | --color-primary: #5d6b4d; |
| 37 | --color-primary-foreground: #ffffff; |
| 38 | --color-secondary: #e8e0d0; |
| 39 | --color-secondary-foreground: #4f5f42; |
| 40 | --color-muted: #efe7d7; |
| 41 | --color-muted-foreground: #7a8369; |
| 42 | --color-accent: #d4e4c1; |
| 43 | --color-accent-foreground: #3e4a32; |
| 44 | --color-destructive: #b15a58; |
| 45 | --color-destructive-foreground: #ffffff; |
| 46 | --color-border: rgba(161, 142, 112, 0.26); |
| 47 | --color-input: rgba(78, 96, 64, 0.12); |
| 48 | --color-ring: #8fbc8f; |
| 49 | } |
| 50 | |
| 51 | * { |
| 52 | border-color: var(--color-border); |
| 53 | } |
| 54 | |
| 55 | html, |
| 56 | body, |
| 57 | #root { |
| 58 | height: 100%; |
| 59 | } |
| 60 | |
| 61 | body { |
| 62 | background-color: var(--color-background); |
| 63 | color: var(--color-foreground); |
| 64 | font-family: "Elms Sans", "SF Pro Text", "Segoe UI", system-ui, sans-serif; |
| 65 | text-rendering: optimizeLegibility; |
| 66 | background-image: |
| 67 | radial-gradient(circle at 12% 8%, rgba(212, 228, 193, 0.55), transparent 32%), |
| 68 | radial-gradient(circle at 88% 0%, rgba(200, 184, 158, 0.38), transparent 30%), |
| 69 | linear-gradient(145deg, #f5f1e8 0%, #f1eadb 48%, #ece3cf 100%); |
| 70 | } |
| 71 | |
| 72 | /* Global scrollbar theme (Windows + macOS + Firefox) */ |
| 73 | :root { |
| 74 | --scrollbar-thumb: rgba(116, 136, 90, 0.72); |
| 75 | --scrollbar-thumb-hover: rgba(99, 120, 73, 0.86); |
| 76 | --scrollbar-track: rgba(232, 223, 205, 0.62); |
| 77 | } |
| 78 | |
| 79 | * { |
| 80 | scrollbar-width: thin; /* Firefox */ |
| 81 | scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* Firefox */ |
| 82 | } |
| 83 | |
| 84 | *::-webkit-scrollbar { |
| 85 | width: 10px; |
| 86 | height: 10px; |
| 87 | } |
| 88 | |
| 89 | *::-webkit-scrollbar-track { |
| 90 | background: var(--scrollbar-track); |
| 91 | border-radius: 999px; |
| 92 | } |
| 93 | |
| 94 | *::-webkit-scrollbar-thumb { |
| 95 | background: linear-gradient(180deg, rgba(128, 149, 101, 0.9), rgba(106, 127, 80, 0.9)); |
| 96 | border: 2px solid rgba(242, 233, 217, 0.78); |
| 97 | border-radius: 999px; |
| 98 | } |
| 99 | |
| 100 | *::-webkit-scrollbar-thumb:hover { |
| 101 | background: var(--scrollbar-thumb-hover); |
| 102 | } |
| 103 | |
| 104 | *::-webkit-scrollbar-corner { |
| 105 | background: transparent; |
| 106 | } |
| 107 | |
| 108 | #root { |
| 109 | min-height: 100%; |
| 110 | } |
| 111 | |
| 112 | :root { |
| 113 | --app-titlebar-height: 48px; |
| 114 | } |
| 115 | |
| 116 | .app-drag-region { |
| 117 | -webkit-app-region: drag; |
| 118 | user-select: none; |
| 119 | } |
| 120 | |
| 121 | .app-no-drag { |
| 122 | -webkit-app-region: no-drag; |
| 123 | } |
| 124 | |
| 125 | /* Reserve space for custom titlebar on Windows/Linux */ |
| 126 | .app-titlebar-spacer { |
| 127 | height: var(--app-titlebar-height); |
| 128 | flex-shrink: 0; |
| 129 | } |
| 130 | |
| 131 | .app-titlebar { |
| 132 | height: var(--app-titlebar-height); |
| 133 | flex-shrink: 0; |
| 134 | } |
| 135 | |
| 136 | .app-shell { |
| 137 | animation: shell-enter 280ms ease-out; |
| 138 | } |
| 139 | |
| 140 | .soft-card { |
| 141 | background: linear-gradient(165deg, rgba(255, 252, 247, 0.93), rgba(244, 238, 225, 0.88)); |
| 142 | box-shadow: 0 14px 34px rgba(88, 75, 56, 0.12), 0 2px 8px rgba(79, 66, 49, 0.08); |
| 143 | border: 1px solid rgba(173, 154, 123, 0.35); |
| 144 | border-radius: 10px; |
| 145 | } |
| 146 | |
| 147 | .soft-card-hover { |
| 148 | transition: all 180ms ease; |
| 149 | } |
| 150 | |
| 151 | .soft-card-hover:hover { |
| 152 | box-shadow: 0 18px 36px rgba(92, 78, 57, 0.16), 0 4px 12px rgba(83, 70, 52, 0.1); |
| 153 | transform: translateY(-2px); |
| 154 | } |
| 155 | |
| 156 | .soft-btn { |
| 157 | background: linear-gradient(145deg, rgba(255, 250, 242, 0.98), rgba(238, 227, 206, 0.95)); |
| 158 | box-shadow: 0 8px 20px rgba(86, 72, 53, 0.13), 0 2px 6px rgba(86, 72, 53, 0.08); |
| 159 | border: 1px solid rgba(168, 148, 116, 0.36); |
| 160 | } |
| 161 | |
| 162 | .soft-btn:hover { |
| 163 | box-shadow: 0 11px 24px rgba(86, 72, 53, 0.18), 0 3px 8px rgba(86, 72, 53, 0.1); |
| 164 | transform: translateY(-2px); |
| 165 | } |
| 166 | |
| 167 | .soft-btn:active { |
| 168 | box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); |
| 169 | transform: translateY(0); |
| 170 | } |
| 171 | |
| 172 | .soft-input { |
| 173 | background: rgba(255, 251, 245, 0.8); |
| 174 | box-shadow: inset 0 2px 6px rgba(73, 61, 44, 0.08); |
| 175 | border: 1px solid rgba(148, 128, 94, 0.24); |
| 176 | } |
| 177 | |
| 178 | .soft-input:focus { |
| 179 | background: rgba(255, 252, 248, 0.97); |
| 180 | border-color: #8fbc8f; |
| 181 | box-shadow: 0 0 0 3px rgba(143, 188, 143, 0.24); |
| 182 | } |
| 183 | |
| 184 | .soft-surface, |
| 185 | .soft-surface-subtle, |
| 186 | .soft-titlebar { |
| 187 | background: rgba(255, 251, 244, 0.78); |
| 188 | box-shadow: 0 10px 28px rgba(86, 73, 54, 0.13), 0 2px 6px rgba(86, 73, 54, 0.08); |
| 189 | border: 1px solid rgba(166, 145, 110, 0.3); |
| 190 | } |
| 191 | |
| 192 | .soft-inset { |
| 193 | background: rgba(247, 240, 226, 0.75); |
| 194 | box-shadow: inset 0 2px 6px rgba(85, 70, 50, 0.09); |
| 195 | border: 1px solid rgba(155, 134, 98, 0.28); |
| 196 | } |
| 197 | |
| 198 | .soft-pill { |
| 199 | background: rgba(249, 244, 233, 0.9); |
| 200 | border: 1px solid rgba(166, 145, 110, 0.33); |
| 201 | box-shadow: 0 6px 14px rgba(85, 71, 51, 0.12), 0 1px 3px rgba(85, 71, 51, 0.06); |
| 202 | } |
| 203 | |
| 204 | .soft-panel-edge { |
| 205 | border: 1px solid rgba(166, 145, 110, 0.3); |
| 206 | } |
| 207 | |
| 208 | .organic-serif { |
| 209 | font-family: "Elms Sans", "SF Pro Text", "Segoe UI", system-ui, sans-serif; |
| 210 | letter-spacing: 0.01em; |
| 211 | } |
| 212 | |
| 213 | .organic-shape { |
| 214 | border-radius: 12px; |
| 215 | } |
| 216 | |
| 217 | .leaf-shape { |
| 218 | border-radius: 12px; |
| 219 | } |
| 220 | |
| 221 | /* App-wide radius scale: keep the UI soft, but avoid overly pill-like controls. */ |
| 222 | .rounded-sm { |
| 223 | border-radius: 3px !important; |
| 224 | } |
| 225 | |
| 226 | .rounded, |
| 227 | .rounded-md { |
| 228 | border-radius: 5px !important; |
| 229 | } |
| 230 | |
| 231 | .rounded-lg { |
| 232 | border-radius: 8px !important; |
| 233 | } |
| 234 | |
| 235 | .rounded-xl { |
| 236 | border-radius: 10px !important; |
| 237 | } |
| 238 | |
| 239 | .rounded-2xl, |
| 240 | .rounded-3xl, |
| 241 | [class*="rounded-[1rem]"], |
| 242 | [class*="rounded-[1.15rem]"], |
| 243 | [class*="rounded-[1.25rem]"], |
| 244 | [class*="rounded-[1.35rem]"], |
| 245 | [class*="rounded-[1.4rem]"], |
| 246 | [class*="rounded-[1.5rem]"], |
| 247 | [class*="rounded-[1.55rem]"], |
| 248 | [class*="rounded-[2rem]"] { |
| 249 | border-radius: 12px !important; |
| 250 | } |
| 251 | |
| 252 | .rounded-full, |
| 253 | [class*="rounded-[30%"], |
| 254 | [class*="rounded-[38%"], |
| 255 | [class*="rounded-[5%"] { |
| 256 | border-radius: 10px !important; |
| 257 | } |
| 258 | |
| 259 | .session-create-workspace { |
| 260 | background: transparent !important; |
| 261 | } |
| 262 | |
| 263 | @keyframes shell-enter { |
| 264 | from { |
| 265 | opacity: 0; |
| 266 | transform: translateY(10px); |
| 267 | } |
| 268 | to { |
| 269 | opacity: 1; |
| 270 | transform: translateY(0); |
| 271 | } |
| 272 | } |
| 273 | |
| 274 | .gen-grid { |
| 275 | background-image: |
| 276 | linear-gradient(rgba(132, 141, 102, 0.16) 1px, transparent 1px), |
| 277 | linear-gradient(90deg, rgba(132, 141, 102, 0.16) 1px, transparent 1px); |
| 278 | background-size: 36px 36px; |
| 279 | animation: gen-grid-pan 18s linear infinite; |
| 280 | } |
| 281 | |
| 282 | .gen-orb { |
| 283 | animation: gen-orb-float 9s ease-in-out infinite; |
| 284 | } |
| 285 | |
| 286 | .gen-shimmer { |
| 287 | background-size: 220% 100%; |
| 288 | animation: gen-shimmer-slide 2.2s linear infinite; |
| 289 | } |
| 290 | |
| 291 | @keyframes gen-grid-pan { |
| 292 | from { |
| 293 | transform: translate3d(0, 0, 0); |
| 294 | } |
| 295 | to { |
| 296 | transform: translate3d(-36px, -36px, 0); |
| 297 | } |
| 298 | } |
| 299 | |
| 300 | @keyframes gen-orb-float { |
| 301 | 0%, |
| 302 | 100% { |
| 303 | transform: translateY(0px); |
| 304 | } |
| 305 | 50% { |
| 306 | transform: translateY(-18px); |
| 307 | } |
| 308 | } |
| 309 | |
| 310 | @keyframes gen-shimmer-slide { |
| 311 | from { |
| 312 | background-position: 0% 50%; |
| 313 | } |
| 314 | to { |
| 315 | background-position: 220% 50%; |
| 316 | } |
| 317 | } |
| 318 |