@import 'tailwindcss'; /* Admin (and manual) dark mode toggles .dark on ; Tailwind v4 defaults to prefers-color-scheme only */ @custom-variant dark (&:where(.dark, .dark *)); /* Admin UI: single corner radius = rounded-2xl (1rem) across admin-layout + resources/views/admin. Use rounded-full only for pills, avatars-as-circles, and dots. */ @import '@fontsource/inter/400.css'; @import '@fontsource/inter/500.css'; @import '@fontsource/inter/600.css'; @import '@fontsource/inter/700.css'; @import '@fortawesome/fontawesome-free/css/all.min.css'; @theme { /* Brand teal — CTAs, links, focus rings */ --color-primary: var(--primary, #037768); --color-primary-dark: color-mix(in srgb, var(--primary, #037768), black 15%); /* Gradients / lighter teal accents */ --color-primary-light: color-mix(in srgb, var(--primary, #037768), white 15%); /* Readable mint on dark UI (calmer than pure neon) */ --color-primary-on-dark: color-mix(in srgb, var(--primary, #037768), white 40%); --color-primary-foreground: #ffffff; /* Footer, cart badge, alternating accents — muted plum vs old magenta #730163 */ --color-secondary: #3d2f45; --color-secondary-hover: #322839; /* Highlights / sale callouts */ --color-accent: #d4a84b; /* Legacy token — prefer fg / fg-muted for new UI */ --color-text-dark: #494949; /* Storefront + shared: readable hierarchy (not pure black) */ --color-fg: #1f2937; --color-fg-heading: #111827; --color-fg-muted: #4b5563; --color-fg-subtle: #6b7280; --color-fg-faint: #9ca3af; --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } @layer base { html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { @apply font-body bg-white text-fg; } h1, h2, h3, h4, h5, h6 { @apply font-semibold text-fg-heading tracking-tight; } b, strong { @apply font-semibold text-fg-heading; } /* Form controls inherit readable text when classes omit color */ input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']), textarea, select { @apply text-fg; } input::placeholder, textarea::placeholder { @apply text-fg-faint; } ::selection { background-color: color-mix(in srgb, var(--color-primary) 28%, transparent); color: var(--color-fg-heading); } } /* Never use literal black (#000) for text — align with heading / body tokens. */ @layer utilities { .text-black { @apply text-fg-heading; } } @layer components { .glass-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .dark .glass-card { background: rgba(17, 24, 39, 0.8); border: 1px solid rgba(255, 255, 255, 0.05); } /* CMS / legal pages — same hierarchy as global typography tokens */ .page-content h2 { @apply text-[2rem] font-extrabold text-fg-heading mt-8 mb-4 tracking-tight; } .page-content h3 { @apply text-xl font-bold text-fg mt-6 mb-3; } .page-content p { @apply text-base text-fg-muted leading-relaxed mb-5; } .page-content ul { @apply list-disc pl-6 mb-6 text-fg-muted; } .page-content ul li { @apply mb-2 leading-relaxed; } .page-content ul li::marker { color: var(--color-primary); } } @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @source '../**/*.blade.php'; /* Custom Carousel Styles */ .carousel-container { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .carousel-container::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .snap-inline { scroll-snap-type: inline mandatory; } .snap-inline>* { scroll-snap-align: start; }