/* ============================================================================ SHADCN-INSPIRED DESIGN SYSTEM Modular component-based CSS architecture ============================================================================ */ /* Core design tokens and base styles - load first */ @import url('./components/css/tokens.css'); /* Layout and structure */ @import url('./components/css/layout.css'); /* Navigation components */ @import url('./components/css/tabs.css'); /* Content containers */ @import url('./components/css/cards.css'); /* Interactive elements */ @import url('./components/css/buttons.css'); @import url('./components/css/forms.css'); /* Data display */ @import url('./components/css/tables.css'); @import url('./components/css/badges.css'); /* Utilities and responsive styles */ @import url('./components/css/utilities.css'); /* Landing page styles */ @import url('./components/css/landing.css'); /* * Page reveal: prevent flash of unstyled Clerk/Alpine content during page load. * clerk-auth.js adds `clerk-loading` to immediately when parsed (before * exists), hiding the page. ClerkAuth.init() swaps it for `clerk-loaded` * once Clerk is ready (or after a 3-second fallback timeout). * Pages that don't include clerk-auth.js are never affected. */ .clerk-loading body { opacity: 0; } .clerk-loaded body { opacity: 1; transition: opacity 0.1s ease; }