/* You can define theme-specific CSS variables or styles here */
:root {
    --clr-primary: #4f46e5; /* Indigo-600 as an example */
    --clr-secondary: #7c3aed; /* Purple-600 */
    --clr-accent: #ec4899; /* Pink-500 */
    --clr-text-light: #f8fafc; /* slate-50 */
    --clr-text-dark: #1e293b; /* slate-800 */
    --font-primary: 'Inter', sans-serif; /* Matches the Google Font example */
}

body {
    font-family: var(--font-primary);
}

/* Add any other global theme styles */
.hero-section h1, .hero-section p {
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Basic text shadow for readability on images */
}

/* You might want to style your header/footer further here or via Tailwind utility classes directly in Blade files */