@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: oklch(0.99 0.003 264);
--foreground: oklch(0.18 0.013 264);
--card: oklch(1 0 0);
--card-foreground: oklch(0.18 0.013 264);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.18 0.013 264);
--primary: oklch(0.55 0.18 280);
--primary-foreground: oklch(0.985 0.003 264);
--secondary: oklch(0.96 0.005 264);
--secondary-foreground: oklch(0.22 0.013 264);
--muted: oklch(0.96 0.005 264);
--muted-foreground: oklch(0.45 0.013 264);
--accent: oklch(0.94 0.012 280);
--accent-foreground: oklch(0.22 0.013 264);
--destructive: oklch(0.55 0.22 25);
--destructive-foreground: oklch(0.985 0.003 264);
--success: oklch(0.60 0.17 155);
--success-foreground: oklch(0.985 0.003 264);
--border: oklch(0.92 0.006 264);
--input: oklch(0.92 0.006 264);
--ring: oklch(0.55 0.18 280);
--radius: 0.625rem;
--bg-deep: oklch(0.97 0.003 264);
--bg-base: oklch(0.99 0.002 264);
--bg-elevated: oklch(1 0 0);
--bg-hover: oklch(0.96 0.005 264);
--accent-glow: oklch(0.55 0.18 280 / 0.12);
--border-subtle: oklch(0.93 0.005 264);
--border-hover: oklch(0.88 0.008 264);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
.dark {
--background: oklch(0.11 0.010 264);
--foreground: oklch(0.92 0.006 264);
--card: oklch(0.15 0.010 264);
--card-foreground: oklch(0.92 0.006 264);
--popover: oklch(0.15 0.010 264);
--popover-foreground: oklch(0.92 0.006 264);
--primary: oklch(0.66 0.20 280);
--primary-foreground: oklch(0.11 0.010 264);
--secondary: oklch(0.20 0.010 264);
--secondary-foreground: oklch(0.92 0.006 264);
--muted: oklch(0.20 0.010 264);
--muted-foreground: oklch(0.58 0.010 264);
--accent: oklch(0.22 0.014 280);
--accent-foreground: oklch(0.92 0.006 264);
--destructive: oklch(0.60 0.20 25);
--destructive-foreground: oklch(0.92 0.006 264);
--success: oklch(0.72 0.19 155);
--success-foreground: oklch(0.11 0.010 264);
--border: oklch(0.22 0.008 264);
--input: oklch(0.22 0.008 264);
--ring: oklch(0.66 0.20 280);
--bg-deep: oklch(0.09 0.008 264);
--bg-base: oklch(0.12 0.010 264);
--bg-elevated: oklch(0.18 0.010 264);
--bg-hover: oklch(0.21 0.010 264);
--accent-glow: oklch(0.66 0.20 280 / 0.18);
--border-subtle: oklch(0.20 0.008 264);
--border-hover: oklch(0.32 0.010 264);
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground antialiased;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
pre, code {
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
font-size: 0.875em;
}
}
@layer components {
.card-elevated {
@apply rounded-lg border bg-card shadow-sm transition-shadow duration-150 hover:shadow-md;
}
}
@layer utilities {
.glow-accent {
box-shadow: 0 0 0 1px var(--accent-glow), 0 0 12px var(--accent-glow);
}
.glow-accent-sm {
box-shadow: 0 0 0 1px var(--accent-glow);
}
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar:hover {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--border-hover);
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scale-in {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slide-in-left {
from {
opacity: 0;
transform: translateX(-4px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-fade-in-up {
animation: fade-in-up 250ms var(--ease-out-expo) both;
}
.animate-scale-in {
animation: scale-in 300ms var(--ease-out-expo) both;
}
.animate-slide-in-left {
animation: slide-in-left 200ms var(--ease-out-expo) both;
}
.stagger-children > * {
animation: fade-in-up 250ms var(--ease-out-expo) both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 30ms; }
.stagger-children > *:nth-child(3) { animation-delay: 60ms; }
.stagger-children > *:nth-child(4) { animation-delay: 90ms; }
.stagger-children > *:nth-child(5) { animation-delay: 120ms; }
.stagger-children > *:nth-child(6) { animation-delay: 150ms; }
.stagger-children > *:nth-child(7) { animation-delay: 180ms; }
.stagger-children > *:nth-child(8) { animation-delay: 210ms; }
.stagger-children > *:nth-child(9) { animation-delay: 240ms; }
.stagger-children > *:nth-child(10) { animation-delay: 270ms; }