@import 'tailwindcss';
/* ============================================
DESIGN SYSTEM - CSS VARIABLES
============================================ */
@layer base {
:root {
/* Background */
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
/* Card */
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
/* Popover */
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
/* Primary - Indigo */
--primary: 239 84% 67%;
--primary-foreground: 0 0% 100%;
--primary-hover: 239 84% 60%;
/* Secondary */
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
/* Muted */
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
/* Accent */
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
/* Destructive */
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
/* Success */
--success: 142 76% 36%;
--success-foreground: 0 0% 100%;
--success-muted: 142 76% 95%;
/* Warning */
--warning: 38 92% 50%;
--warning-foreground: 0 0% 100%;
--warning-muted: 48 96% 95%;
/* Info */
--info: 199 89% 48%;
--info-foreground: 0 0% 100%;
--info-muted: 199 89% 95%;
/* Border & Input */
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 239 84% 67%;
/* Border Radius */
--radius-sm: 0.375rem;
--radius: 0.5rem;
--radius-md: 0.625rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
--radius-full: 9999px;
/* Shadows */
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
/* Animation */
--transition-fast: 150ms;
--transition-base: 200ms;
--transition-slow: 300ms;
--transition-slower: 500ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Sidebar (for future use) */
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 239 84% 67%;
}
.dark {
/* Background */
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
/* Card */
--card: 240 10% 6%;
--card-foreground: 0 0% 98%;
/* Popover */
--popover: 240 10% 6%;
--popover-foreground: 0 0% 98%;
/* Primary - Indigo (lighter for dark mode) */
--primary: 239 84% 67%;
--primary-foreground: 0 0% 100%;
--primary-hover: 239 84% 73%;
/* Secondary */
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
/* Muted */
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
/* Accent */
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
/* Destructive */
--destructive: 0 62.8% 50.6%;
--destructive-foreground: 0 0% 98%;
/* Success */
--success: 142 70% 45%;
--success-foreground: 0 0% 100%;
--success-muted: 142 40% 15%;
/* Warning */
--warning: 38 92% 55%;
--warning-foreground: 0 0% 10%;
--warning-muted: 38 40% 15%;
/* Info */
--info: 199 89% 55%;
--info-foreground: 0 0% 100%;
--info-muted: 199 40% 15%;
/* Border & Input */
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 239 84% 67%;
/* Shadows (softer for dark mode) */
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
--shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
--shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
--shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
/* Sidebar */
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 239 84% 67%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 239 84% 67%;
}
}
/* ============================================
BASE STYLES
============================================ */
@layer base {
* {
border-color: hsl(var(--border));
}
html {
scroll-behavior: smooth;
}
body {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-feature-settings: 'rlig' 1, 'calt' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Focus visible styles */
:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
/* Selection styles */
::selection {
background-color: hsl(var(--primary) / 0.2);
color: hsl(var(--foreground));
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: hsl(var(--muted));
border-radius: var(--radius);
}
::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / 0.3);
border-radius: var(--radius);
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.5);
}
}
/* ============================================
UTILITY CLASSES
============================================ */
@layer utilities {
/* Text utilities */
.text-balance {
text-wrap: balance;
}
/* Gradient text */
.text-gradient {
background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--info)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Glass effect */
.glass {
background: hsl(var(--background) / 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Glow effect for primary elements */
.glow-primary {
box-shadow: 0 0 20px hsl(var(--primary) / 0.3),
0 0 40px hsl(var(--primary) / 0.1);
}
/* Card hover effect */
.hover-lift {
transition: transform var(--transition-base) var(--ease-out),
box-shadow var(--transition-base) var(--ease-out);
}
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Skeleton shimmer animation */
.shimmer {
position: relative;
overflow: hidden;
}
.shimmer::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(
90deg,
transparent,
hsl(var(--foreground) / 0.05),
transparent
);
animation: shimmer 2s infinite;
content: '';
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
/* Pulse dot animation */
.pulse-dot {
position: relative;
}
.pulse-dot::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: pulse-ring 1.5s ease-out infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
/* Status indicator colors */
.status-success {
background-color: hsl(var(--success));
}
.status-warning {
background-color: hsl(var(--warning));
}
.status-error {
background-color: hsl(var(--destructive));
}
.status-info {
background-color: hsl(var(--info));
}
/* Hide scrollbar but allow scroll */
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
}
/* ============================================
ANIMATIONS
============================================ */
@layer utilities {
/* Fade in animation */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Fade in up animation */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fade in down animation */
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Scale in animation */
@keyframes scale-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Slide in from left */
@keyframes slide-in-left {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Slide in from right */
@keyframes slide-in-right {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Animation utility classes */
.animate-fade-in {
animation: fade-in var(--transition-base) var(--ease-out);
}
.animate-fade-in-up {
animation: fade-in-up var(--transition-slow) var(--ease-out);
}
.animate-fade-in-down {
animation: fade-in-down var(--transition-slow) var(--ease-out);
}
.animate-scale-in {
animation: scale-in var(--transition-base) var(--ease-bounce);
}
.animate-slide-in-left {
animation: slide-in-left var(--transition-slow) var(--ease-out);
}
.animate-slide-in-right {
animation: slide-in-right var(--transition-slow) var(--ease-out);
}
/* Stagger delay utilities */
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }
}
/* ============================================
COMPONENT-SPECIFIC STYLES
============================================ */
@layer components {
/* Terminal-style file list */
.file-list-terminal {
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
font-size: 0.75rem;
line-height: 1.5;
background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--muted) / 0.5) 100%);
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
padding: 1rem;
}
/* Timeline connector */
.timeline-connector {
position: absolute;
left: 0.4375rem;
top: 1.25rem;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, hsl(var(--border)) 0%, transparent 100%);
}
/* Timeline dot */
.timeline-dot {
position: relative;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: hsl(var(--background));
border: 2px solid hsl(var(--border));
transition: all var(--transition-base) var(--ease-out);
}
.timeline-dot.active {
background: hsl(var(--primary));
border-color: hsl(var(--primary));
box-shadow: 0 0 0 4px hsl(var(--primary) / 0.2);
}
/* Progress bar */
.progress-bar {
height: 0.375rem;
background: hsl(var(--muted));
border-radius: var(--radius-full);
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--info)));
border-radius: var(--radius-full);
transition: width var(--transition-slow) var(--ease-out);
}
}
