/* Base theme variables (ported from the original TS/Tailwind project) */ :root { --button-outline: rgba(0,0,0, .10); --badge-outline: rgba(0,0,0, .05); --opaque-button-border-intensity: -8; --elevate-1: rgba(0,0,0, .03); --elevate-2: rgba(0,0,0, .08); --background: 0 0% 100%; --foreground: 240 10% 10%; --border: 240 6% 90%; --card: 0 0% 100%; --card-foreground: 240 10% 10%; --card-border: 240 6% 90%; --popover: 0 0% 100%; --popover-foreground: 240 10% 10%; --popover-border: 240 6% 90%; --primary: 262 83% 58%; --primary-foreground: 0 0% 100%; --secondary: 260 30% 96%; --secondary-foreground: 262 83% 40%; --muted: 240 6% 96%; --muted-foreground: 240 5% 46%; --accent: 262 30% 94%; --accent-foreground: 262 83% 40%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --input: 240 6% 85%; --ring: 262 83% 58%; --chart-1: 262 83% 58%; --chart-2: 316 72% 52%; --chart-3: 200 95% 50%; --chart-4: 142 72% 42%; --chart-5: 38 92% 50%; --font-sans: 'Poppins', 'Inter', sans-serif; --font-serif: Georgia, serif; --font-mono: Menlo, monospace; --radius: .5rem; --shadow-2xs: 0px 1px 2px 0px rgba(0,0,0,0.05); --shadow-xs: 0px 1px 3px 0px rgba(0,0,0,0.1); --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); --shadow: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px -1px rgba(0,0,0,0.1); --shadow-md: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1); --shadow-lg: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1); --shadow-xl: 0px 20px 25px -5px rgba(0,0,0,0.1), 0px 8px 10px -6px rgba(0,0,0,0.1); --shadow-2xl: 0px 25px 50px -12px rgba(0,0,0,0.25); } /* Optional dark mode (add class="dark" on ) */ .dark { --button-outline: rgba(255,255,255, .10); --badge-outline: rgba(255,255,255, .05); --opaque-button-border-intensity: 9; --elevate-1: rgba(255,255,255, .04); --elevate-2: rgba(255,255,255, .09); --background: 260 20% 8%; --foreground: 0 0% 98%; --border: 260 15% 20%; --card: 260 20% 12%; --card-foreground: 0 0% 98%; --card-border: 260 15% 20%; --popover: 260 20% 12%; --popover-foreground: 0 0% 98%; --popover-border: 260 15% 20%; --primary: 262 83% 58%; --primary-foreground: 0 0% 100%; --secondary: 260 20% 18%; --secondary-foreground: 262 60% 80%; --muted: 260 15% 18%; --muted-foreground: 260 10% 60%; --accent: 262 30% 20%; --accent-foreground: 262 60% 80%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --input: 260 15% 25%; --ring: 262 83% 58%; --shadow-2xs: 0px 1px 2px 0px rgba(0,0,0,0.3); --shadow-xs: 0px 1px 3px 0px rgba(0,0,0,0.4); --shadow-sm: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 0px rgba(0,0,0,0.4); --shadow: 0px 1px 3px 0px rgba(0,0,0,0.4), 0px 1px 2px -1px rgba(0,0,0,0.3); --shadow-md: 0px 4px 6px -1px rgba(0,0,0,0.4), 0px 2px 4px -2px rgba(0,0,0,0.3); --shadow-lg: 0px 10px 15px -3px rgba(0,0,0,0.4), 0px 4px 6px -4px rgba(0,0,0,0.3); --shadow-xl: 0px 20px 25px -5px rgba(0,0,0,0.4), 0px 8px 10px -6px rgba(0,0,0,0.3); --shadow-2xl: 0px 25px 50px -12px rgba(0,0,0,0.5); } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Elevate utilities (ported from the original Tailwind layer) */ .hover-elevate, .active-elevate-2 { position: relative; z-index: 0; } .hover-elevate::after, .active-elevate-2::after { content: ""; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; z-index: 999; } .hover-elevate:hover::after { background-color: var(--elevate-1); } .active-elevate-2:active::after { background-color: var(--elevate-2); } .border.hover-elevate::after, .border.active-elevate-2::after { inset: -1px; } /* Simple FAQ accordion animation */ .faq-content { max-height: 0; overflow: hidden; transition: max-height 200ms ease; } .faq-item[data-open="true"] .faq-content { max-height: 400px; } .faq-chevron { transition: transform 200ms ease; } .faq-item[data-open="true"] .faq-chevron { transform: rotate(180deg); }