64c827ee84
- COMP-139: Command palette for quick navigation - COMP-140: Accessibility improvements - COMP-141: Scroll animations with animate-on-scroll component - COMP-143: Demo workspace with seed data and demo banner - COMP-145: Keyboard navigation and shortcuts help Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-Claude) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
75 lines
1.8 KiB
CSS
75 lines
1.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Surfaces */
|
|
--surface-page: #0a0a0a;
|
|
--surface-card: rgb(23 23 23); /* neutral-900 */
|
|
--surface-card-hover: rgb(38 38 38 / 0.5); /* neutral-800/50 */
|
|
--surface-elevated: rgb(23 23 23); /* neutral-900 */
|
|
--surface-input: rgb(10 10 10); /* neutral-950 */
|
|
|
|
/* Text */
|
|
--text-primary: rgb(245 245 245); /* neutral-100 */
|
|
--text-secondary: rgb(163 163 163); /* neutral-400 */
|
|
--text-muted: rgb(115 115 115); /* neutral-500 */
|
|
|
|
/* Borders */
|
|
--border-default: rgb(38 38 38); /* neutral-800 */
|
|
--border-subtle: rgb(38 38 38 / 0.5); /* neutral-800/50 */
|
|
--border-strong: rgb(64 64 64); /* neutral-700 */
|
|
|
|
/* Accent (AgentLens emerald) */
|
|
--accent: #10b981;
|
|
--accent-hover: #34d399;
|
|
--accent-muted: rgba(16, 185, 129, 0.15);
|
|
--accent-foreground: #0a0a0a;
|
|
|
|
/* Radius */
|
|
--radius-card: 1rem;
|
|
--radius-button: 0.5rem;
|
|
--radius-icon: 0.75rem;
|
|
--radius-badge: 9999px;
|
|
|
|
/* Fonts */
|
|
--font-sans: var(--font-inter), system-ui, sans-serif;
|
|
--font-mono: var(--font-jetbrains), 'JetBrains Mono', 'Fira Code', monospace;
|
|
}
|
|
}
|
|
|
|
[data-animate="hidden"] {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
|
|
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
[data-animate="visible"] {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
[data-animate="hidden"][style*="animation-delay"] {
|
|
transition-delay: inherit;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-animate="hidden"] {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
a:focus-visible,
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible,
|
|
[role="button"]:focus-visible,
|
|
[tabindex]:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|