/* ── Color scheme variables ── * Uses the shadcn/ui Zinc palette: black & white with neutral grays. * Dark mode activates via the `.dark` class on or any ancestor. */ :root { --background: #ffffff; --foreground: #09090b; --card: #ffffff; --card-foreground: #09090b; --popover: #ffffff; --popover-foreground: #09090b; --primary: #18181b; --primary-foreground: #fafafa; --secondary: #f4f4f5; --secondary-foreground: #18181b; --muted: #f4f4f5; --muted-foreground: #71717a; --accent: #f4f4f5; --accent-foreground: #18181b; --destructive: #ef4444; --destructive-foreground: #fafafa; --border: #e4e4e7; --input: #e4e4e7; --ring: #a1a1aa; --radius: 0.45rem; /* Sidebar */ --sidebar: #fafafa; --sidebar-foreground: #09090b; --sidebar-muted: #71717a; --sidebar-accent: #f4f4f5; --sidebar-accent-foreground: #18181b; --sidebar-border: #e4e4e7; --sidebar-ring: #a1a1aa; /* Panel */ --panel: #ffffff; --panel-foreground: #09090b; --panel-border: #e4e4e7; } .dark { --background: #09090b; --foreground: #fafafa; --card: #09090b; --card-foreground: #fafafa; --popover: #18181b; --popover-foreground: #fafafa; --primary: #fafafa; --primary-foreground: #18181b; --secondary: #27272a; --secondary-foreground: #fafafa; --muted: #27272a; --muted-foreground: #a1a1aa; --accent: #27272a; --accent-foreground: #fafafa; --destructive: #dc2626; --destructive-foreground: #fafafa; --border: #27272a; --input: #27272a; --ring: #d4d4d8; /* Sidebar */ --sidebar: #18181b; --sidebar-foreground: #fafafa; --sidebar-muted: #a1a1aa; --sidebar-accent: #27272a; --sidebar-accent-foreground: #fafafa; --sidebar-border: #27272a; --sidebar-ring: #d4d4d8; /* Panel */ --panel: #09090b; --panel-foreground: #fafafa; --panel-border: #27272a; } /* ── Tailwind v4 theme tokens ── */ @theme { /* Core semantic colors — reference CSS variables for dark mode support */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); /* Sidebar */ --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-muted: var(--sidebar-muted); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Panel */ --color-panel: var(--panel); --color-panel-foreground: var(--panel-foreground); --color-panel-border: var(--panel-border); /* Transition timing */ --transition-duration: 150ms; /* Animations */ --animate-fade-in: fade-in 150ms ease-out; --animate-fade-out: fade-out 150ms ease-in; --animate-scale-in: scale-in 150ms ease-out; --animate-scale-out: scale-out 150ms ease-in; --animate-slide-down-in: slide-down-in 200ms ease-out; --animate-slide-down-out: slide-down-out 200ms ease-in; --animate-slide-up-in: slide-up-in 200ms ease-out; --animate-slide-up-out: slide-up-out 200ms ease-in; --animate-toast-in: toast-in 200ms ease-out; --animate-toast-out: toast-out 150ms ease-in; /* Sheet slide animations */ --animate-sheet-right-in: sheet-right-in 200ms ease-out; --animate-sheet-right-out: sheet-right-out 200ms ease-in; --animate-sheet-left-in: sheet-left-in 200ms ease-out; --animate-sheet-left-out: sheet-left-out 200ms ease-in; --animate-sheet-top-in: sheet-top-in 200ms ease-out; --animate-sheet-top-out: sheet-top-out 200ms ease-in; --animate-sheet-bottom-in: sheet-bottom-in 200ms ease-out; --animate-sheet-bottom-out: sheet-bottom-out 200ms ease-in; /* Accordion */ --animate-accordion-down: accordion-down 200ms ease-out; --animate-accordion-up: accordion-up 200ms ease-in; /* Generic enter/exit (tailwindcss-animate compatible) */ --animate-in: enter 200ms ease-out; --animate-out: exit 150ms ease-in; /* Caret blink (input OTP) */ --animate-caret-blink: caret-blink 1.25s ease-out infinite; } /* ── Keyframes ── */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes scale-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } } @keyframes slide-down-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-down-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } } @keyframes slide-up-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-up-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(4px); } } @keyframes toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* Sheet slide keyframes */ @keyframes sheet-right-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes sheet-right-out { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes sheet-left-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes sheet-left-out { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes sheet-top-in { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes sheet-top-out { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes sheet-bottom-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes sheet-bottom-out { from { transform: translateY(0); } to { transform: translateY(100%); } } /* Accordion collapse/expand */ @keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } } /* Generic enter/exit animations (used by dialog, sheet, popover, etc.) */ @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } } /* Caret blink for OTP input */ @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } /* ── Custom utilities ── */ @utility no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } /* ── tailwindcss-animate compatible utilities ── * These provide fade-in/out, zoom-in/out, slide-in/out utilities * used by shadcn/ui component styles via @apply. */ @utility fade-in { --tw-enter-opacity: 0; } @utility fade-in-* { --tw-enter-opacity: calc(var(--value) * 1%); } @utility fade-out { --tw-exit-opacity: 0; } @utility fade-out-* { --tw-exit-opacity: calc(var(--value) * 1%); } @utility zoom-in-* { --tw-enter-scale: calc(var(--value) * 1%); } @utility zoom-out-* { --tw-exit-scale: calc(var(--value) * 1%); } @utility slide-in-from-top-* { --tw-enter-translate-y: calc(var(--value) * -1); } @utility slide-in-from-bottom-* { --tw-enter-translate-y: var(--value); } @utility slide-in-from-left-* { --tw-enter-translate-x: calc(var(--value) * -1); } @utility slide-in-from-right-* { --tw-enter-translate-x: var(--value); } @utility slide-out-to-top-* { --tw-exit-translate-y: calc(var(--value) * -1); } @utility slide-out-to-bottom-* { --tw-exit-translate-y: var(--value); } @utility slide-out-to-left-* { --tw-exit-translate-x: calc(var(--value) * -1); } @utility slide-out-to-right-* { --tw-exit-translate-x: var(--value); }