@import "tailwindcss"; @theme { /* =========================================== STITCH AI - DESIGN TOKENS =========================================== */ /* --- Colors: Premium Dark Mode (Deep Zinc/Blue) --- */ --color-brand-primary: #6366f1; /* Indigo 500 */ --color-brand-secondary: #8b5cf6; /* Violet 500 */ --color-brand-accent: #06b6d4; /* Cyan 500 */ --color-bg-base: #020617; /* Slate 950 (Deepest) */ --color-bg-card: #0f172a; /* Slate 900 */ --color-bg-subtle: #1e293b; /* Slate 800 */ --color-text-main: #f8fafc; /* Slate 50 */ --color-text-muted: #94a3b8; /* Slate 400 */ --color-text-dim: #64748b; /* Slate 500 */ --color-border-subtle: rgba(255, 255, 255, 0.08); --color-border-highlight: rgba(255, 255, 255, 0.15); /* --- Fonts --- */ --font-display: "Outfit", sans-serif; --font-body: "Inter", sans-serif; --font-mono: "JetBrains Mono", monospace; /* --- Shadows & Glows --- */ --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3); --shadow-glass: 0 8px 30px rgba(0, 0, 0, 0.5); /* --- Backward Compatibility (Legacy Variables) --- */ --color-primary: var(--color-brand-primary); --color-primary-hover: var(--color-brand-secondary); --color-bg-primary: var(--color-bg-base); --color-bg-secondary: var(--color-bg-subtle); --color-surface: var(--color-bg-card); --color-border: var(--color-border-subtle); --color-text-primary: var(--color-text-main); --color-text-secondary: var(--color-text-muted); --color-text-muted: var(--color-text-dim); --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; } /* =========================================== BASE STYLES =========================================== */ @layer base { /* ======================================== FOUC PREVENTION & SMOOTH THEME TRANSITIONS Prevents flash/blink when switching themes ======================================== */ /* CRITICAL: Prevent initial flash by setting background on html */ html { background-color: var(--color-bg-base); } /* NO transitions by default - prevents FOUC on page load */ *, *::before, *::after { transition: none !important; } /* ONLY enable transitions AFTER page is fully loaded and theme is applied */ html.theme-ready *, html.theme-ready *::before, html.theme-ready *::after { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } /* Exclude elements that should NEVER transition */ .no-transition, .animate-spin, .animate-pulse, .animate-bounce, canvas, video, img { transition: none !important; } body { @apply bg-bg-base text-text-main font-body antialiased selection:bg-brand-primary selection:text-white; /* Subtle radial gradient background for depth */ background-image: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.1) 0%, transparent 50%); background-attachment: fixed; /* color-scheme is set dynamically by inline JS in */ } /* Force dark options for standard dark theme */ option { background-color: #0f172a !important; /* bg-bg-card equivalent */ color: #f8fafc !important; /* text-text-main equivalent */ } /* Toast Styles */ .toast { background-color: var(--color-bg-card); border: 1px solid var(--color-border-subtle); color: var(--color-text-main); padding: 1rem; border-radius: 1rem; box-shadow: var(--shadow-glass); display: flex; align-items: center; gap: 0.75rem; min-width: 300px; backdrop-filter: blur(12px); transition: all 0.3s ease; } /* Light Theme Override */ [data-theme="light"] { --color-bg-base: #f8fafc; /* Slate 50 */ --color-bg-card: #ffffff; /* White */ --color-bg-subtle: #e2e8f0; /* Slate 200 */ --color-text-main: #0f172a; /* Slate 900 */ --color-text-muted: #475569; /* Slate 600 */ --color-text-dim: #64748b; /* Slate 500 */ --color-border-subtle: rgba(0, 0, 0, 0.08); --color-border-highlight: rgba(0, 0, 0, 0.15); /* Updated shadow for light mode */ --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.2); --shadow-glass: 0 8px 30px rgba(0, 0, 0, 0.1); } [data-theme="light"] { color-scheme: light; --color-bg-base: #f8fafc; /* Slate 50 */ --color-bg-card: #ffffff; /* ... */ } [data-theme="light"] body { background-image: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.05) 0%, transparent 50%); } [data-theme="light"] .toast { background-color: #ffffff !important; color: #0f172a !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; } h1, h2, h3, h4, h5, h6 { @apply font-display tracking-tight; color: var(--color-text-main); } /* Light theme specific overrides for inline styles and utility classes */ [data-theme="light"] .text-white { color: var(--color-text-main) !important; } [data-theme="light"] .bg-white\/5, [data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0, 0, 0, 0.03) !important; } [data-theme="light"] .bg-white\/10, [data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .border-white\/5 { border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.12) !important; } [data-theme="light"] .divide-white\/5>*+* { border-color: rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .bg-black\/20 { background-color: rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .bg-bg-card\/40, [data-theme="light"] .bg-bg-card\/50, [data-theme="light"] .bg-bg-card\/60, [data-theme="light"] .bg-bg-card\/90 { background-color: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Light mode modal overlays */ [data-theme="light"] .bg-black\/80 { background-color: rgba(0, 0, 0, 0.5) !important; } /* Light mode modal cards */ [data-theme="light"] .bg-bg-card { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; } /* Light mode form inputs and selects */ [data-theme="light"] .bg-bg-base { background-color: #f1f5f9 !important; } [data-theme="light"] select, [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="date"], [data-theme="light"] input[type="datetime-local"], [data-theme="light"] textarea { background-color: #f1f5f9 !important; color: #0f172a !important; border-color: rgba(0, 0, 0, 0.15) !important; } [data-theme="light"] select option { background-color: #ffffff !important; color: #0f172a !important; } /* Light mode toast notifications */ [data-theme="light"] #toastContainer>div { background-color: #ffffff !important; color: #0f172a !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; } /* Light mode gradient text fix */ [data-theme="light"] .bg-clip-text.text-transparent { color: var(--color-text-main) !important; -webkit-text-fill-color: var(--color-text-main) !important; background: none !important; } /* Profile/User Dropdown - works on both hover and click (active class) */ #userDropdown.active { opacity: 1 !important; visibility: visible !important; } /* Chart Legend Styles */ .chart-legend-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-subtle); } .chart-legend-item:last-child { border-bottom: none; } .chart-legend-color { width: 0.75rem; height: 0.75rem; border-radius: 9999px; flex-shrink: 0; } .chart-legend-item svg { width: 1.25rem !important; height: 1.25rem !important; flex-shrink: 0; } /* Light mode for gradient elements */ [data-theme="light"] .from-white.to-white\/60 { --tw-gradient-from: #0f172a !important; --tw-gradient-to: #475569 !important; } /* Scrollbar Polish */ ::-webkit-scrollbar { @apply w-2; } ::-webkit-scrollbar-track { @apply bg-transparent; } ::-webkit-scrollbar-thumb { @apply bg-bg-subtle rounded-full border-2 border-bg-base; } ::-webkit-scrollbar-thumb:hover { @apply bg-text-dim; } /* Functional utilities */ .hidden.active { display: flex !important; } /* Specific overrides for modals that need specific display types */ #transactionModal.hidden.active { display: block !important; } /* Sidebar mobile toggle */ aside.hidden.active { display: flex !important; } } /* =========================================== UTILITY COMPOSITIONS (Glassmorphism) =========================================== */ @layer utilities { .glass-panel { @apply bg-bg-card/60 backdrop-blur-xl border border-border-subtle shadow-glass; } .glass-card { @apply bg-bg-card/40 backdrop-blur-md border border-border-subtle hover:border-border-highlight hover:bg-bg-card/60 transition-all duration-300; } .text-gradient { @apply bg-clip-text text-transparent bg-linear-to-r from-brand-primary to-brand-accent; } .btn-primary { @apply inline-flex items-center justify-center px-4 py-2 rounded-lg bg-brand-primary text-white font-medium shadow-lg shadow-brand-primary/20 hover:bg-brand-primary/90 hover:shadow-brand-primary/40 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer border border-transparent; } .btn-secondary { @apply inline-flex items-center justify-center px-4 py-2 rounded-lg bg-bg-subtle text-text-main font-medium border border-border-subtle hover:bg-bg-subtle/80 hover:border-text-dim transition-all duration-200 cursor-pointer; } .btn-ghost { @apply inline-flex items-center justify-center px-3 py-2 rounded-lg bg-transparent text-text-muted hover:text-text-main hover:bg-white/5 transition-all duration-200 cursor-pointer; } /* Sidebar Navigation Item */ .nav-item { @apply flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted font-medium transition-all duration-200 hover:bg-white/5 hover:text-text-main; } .nav-item.active { @apply bg-brand-primary/10 text-brand-primary; } .nav-item.active .icon { @apply text-brand-primary; } /* Mobile-specific utilities */ @media (max-width: 768px) { .mobile-card { @apply p-4; } .mobile-text-sm { @apply text-sm; } .mobile-gap-3 { @apply gap-3; } } /* Ensure touch targets are at least 44px */ .touch-target { @apply min-h-[44px] min-w-[44px]; } /* Blur text utility for hiding sensitive data */ .blur-text { filter: blur(8px); user-select: none; } /* Animation for fade in */ .animate-fadeIn { animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Chart legend item */ .chart-legend-item { @apply flex items-center gap-2 text-xs text-text-muted py-1; } .chart-legend-color { @apply w-3 h-3 rounded-full; } /* Safe area padding for mobile */ .pb-safe { padding-bottom: env(safe-area-inset-bottom, 16px); } }