@tailwind base; @tailwind components; @tailwind utilities; /* ===================================================== DESIGN TOKENS — CSS Custom Properties Dark theme is default; add .light to for light ===================================================== */ @layer base { :root { /* Backgrounds */ --color-bg-primary: #09090b; --color-bg-secondary: #18181b; --color-bg-elevated: #27272a; /* Text */ --color-text-primary: #fafafa; --color-text-secondary: #a1a1aa; --color-text-muted: #52525b; /* Accent (brand purple) */ --color-accent: #8b5cf6; --color-accent-hover: #7c3aed; --color-accent-active: #6d28d9; --color-accent-foreground: #ffffff; /* Borders */ --color-border: #27272a; --color-border-hover: #3f3f46; /* Status */ --color-success: #22c55e; --color-success-bg: rgba(34, 197, 94, 0.12); --color-warning: #f59e0b; --color-warning-bg: rgba(245, 158, 11, 0.12); --color-error: #ef4444; --color-error-bg: rgba(239, 68, 68, 0.12); --color-info: #3b82f6; --color-info-bg: rgba(59, 130, 246, 0.12); /* Code */ --color-code-bg: #1f1f23; --color-code-text: #a78bfa; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); /* Border radius */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius: 0.5rem; /* Animation tokens */ --transition-fast: 100ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; /* Tailwind / shadcn compat (HSL channel values) */ --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 3.7% 10%; --card-foreground: 0 0% 98%; --popover: 240 3.7% 15.9%; --popover-foreground: 0 0% 98%; --primary: 263.4 70% 50.4%; --primary-foreground: 0 0% 100%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 263.4 70% 50.4%; } /* Light theme override */ .light { --color-bg-primary: #fafafa; --color-bg-secondary: #f4f4f5; --color-bg-elevated: #ffffff; --color-text-primary: #09090b; --color-text-secondary: #52525b; --color-text-muted: #a1a1aa; --color-accent: #7c3aed; --color-accent-hover: #6d28d9; --color-accent-active: #5b21b6; --color-accent-foreground: #ffffff; --color-border: #e4e4e7; --color-border-hover: #d4d4d8; --color-success: #16a34a; --color-success-bg: rgba(22, 163, 74, 0.1); --color-warning: #d97706; --color-warning-bg: rgba(217, 119, 6, 0.1); --color-error: #dc2626; --color-error-bg: rgba(220, 38, 38, 0.1); --color-info: #2563eb; --color-info-bg: rgba(37, 99, 235, 0.1); --color-code-bg: #f4f4f5; --color-code-text: #7c3aed; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --background: 0 0% 98%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 262.1 83.3% 57.8%; --primary-foreground: 0 0% 100%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 262.1 83.3% 57.8%; } *, *::before, *::after { box-sizing: border-box; border-color: var(--color-border); } html { color-scheme: dark; } html.light { color-scheme: light; } body { background-color: var(--color-bg-primary); color: var(--color-text-primary); font-feature-settings: "rlig" 1, "calt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* Focus visible ring */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } } /* ===================================================== ANIMATIONS ===================================================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideDown { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideDownOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(8px); opacity: 0; } } @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes scaleOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.95); opacity: 0; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ===================================================== SCROLLBAR ===================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-hover); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }