:root {
    /* Colors */
    --color-primary: #50B8B8;
    --color-secondary: #FFC107;
    --color-accent: #8EC3C3;
    --color-background: #F0F8F8;
    --color-footer-bg: #3A5C5C;
    --color-text-dark: #3A5C5C;
    --color-text-light: #FFFFFF;
    --color-section-1: #E6F3F3;
    --color-section-2: #D9EDED;
    --color-section-3: #C8E6E6;
    --color-section-4: #B6DFDF;
    --color-section-5: #A5D8D8;
    --color-section-6: #94D1D1;
    --color-card-border: rgba(255, 255, 255, 0.3);

    /* Typography */
    --font-family-heading: 'Lora', serif; /* Distinctive serif for headings */
    --font-family-body: 'Open Sans', sans-serif; /* Clean sans-serif for body */
    --font-size-base: 1.125rem; /* 18px */
    --line-height-base: 1.6;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    /* Border Radius */
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-lg: 1.5rem; /* For claymorphism and glassmorphism elements */

    /* Shadows */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08); /* Gentle general shadow */
    --shadow-clay-inner: inset 4px 4px 8px rgba(0, 0, 0, 0.1), inset -4px -4px 8px rgba(255, 255, 255, 0.7);
    --shadow-clay-outer: 8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.7);
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.15); /* Lift effect on hover */
}

/* Base Styles */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base for rem units */
}

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-dark);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll from subtle shadows */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--color-text-dark);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    letter-spacing: -0.02em; /* Slightly tighter for headings */
}

h1 {
    font-size: 3.5rem; /* 56px */
    font-weight: 700;
}

h2 {
    font-size: 2.5rem; /* 40px */
    font-weight: 600;
}

h3 {
    font-size: 2rem; /* 32px */
    font-weight: 600;
}

h4 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
}

p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

strong {
    font-weight: 700;
}

/* Utility Classes for Tailwind compatibility (if needed) */
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.bg-secondary { background-color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
.text-dark { color: var(--color-text-dark); }
.text-light { color: var(--color-text-light); }

/* Sections */
.section {
    padding: var(--spacing-xxl) var(--spacing-lg);
    background-color: var(--color-background);
    position: relative;
    z-index: 1;
}

.section-alt-1 { background-color: var(--color-section-1); }
.section-alt-2 { background-color: var(--color-section-2); }
.section-alt-3 { background-color: var(--color-section-3); }
.section-alt-4 { background-color: var(--color-section-4); }
.section-alt-5 { background-color: var(--color-section-5); }
.section-alt-6 { background-color: var(--color-section-6); }

/* Layout - assuming some basic container from Tailwind or custom */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius-lg); /* Softly rounded */
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: var(--shadow-clay-inner); /* Claymorphism inner shadow */
    color: var(--color-text-light);
    background-color: var(--color-accent); /* Default button color */
    outline: none; /* Remove default focus outline */
}

.btn:hover {
    background-color: var(--color-primary); /* Transition to primary on hover */
    transform: translateY(-2px); /* Slight lift */
    box-shadow: var(--shadow-soft), 0 4px 8px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
}

.btn:active {
    transform: translateY(0);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.5); /* Deeper pressed effect */
}

.btn-primary-cta {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.25rem; /* Larger for CTA */
    box-shadow: var(--shadow-clay-outer); /* More pronounced outer shadow for primary CTA */
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); /* Gradient for CTA */
}

.btn-primary-cta:hover {
    box-shadow: var(--shadow-card-hover), var(--shadow-clay-outer); /* Stronger lift on hover */
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); /* Reverse gradient on hover */
}

/* Card Style (Claymorphism + Glassmorphism) */
.card {
    background-color: rgba(255, 255, 255, 0.7); /* Translucent background */
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-soft); /* Soft drop shadow */
    border: 1px solid var(--color-card-border); /* Light border */
    backdrop-filter: blur(8px); /* Glassmorphism blur */
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, box-shadow; /* Optimize for animation */
}

.card:hover {
    transform: translateY(-5px); /* Gentle lift effect */
    box-shadow: var(--shadow-card-hover); /* More pronounced shadow on hover */
}

/* Header & Navigation (example, specific classes would be from HTML) */
.site-header {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--spacing-md) 0;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-nav a {
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.site-nav a:hover,
.site-nav a.active {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    text-decoration: none;
}

/* Footer */
.site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-text-light);
    padding: var(--spacing-xxl) var(--spacing-lg);
    text-align: center;
}

.site-footer a {
    color: var(--color-accent);
}

.site-footer a:hover {
    color: var(--color-primary);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-text-dark);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-md);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-appearance: none; /* Remove default browser styling for select */
    -moz-appearance: none;
    appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2); /* Focus ring */
}

/* Hero Section Specifics */
.hero-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-dark); /* Text color over background */
    background-color: var(--color-section-1); /* Fallback */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: heroBackgroundCycle 30s infinite alternate; /* Example animation */
}

/* Background images are set via JS or inline style, but here's a placeholder */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(240,248,248,0.8) 100%); /* Soft overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: var(--spacing-xl);
}

.hero-content h1 {
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-xl);
    line-height: 1.7;
}

/* Alpine.js Transitions (example) */
[x-cloak] { display: none !important; }

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

.slide-up-enter-active, .slide-up-leave-active {
    transition: all 0.4s ease-out;
}
.slide-up-enter, .slide-up-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

/* Custom logo style (assuming an SVG or image with a class) */
.site-logo {
    display: block;
    width: 60px; /* Example size */
    height: 60px;
    background: linear-gradient(135deg, #50B8B8, #8EC3C3); /* Gradient for logo */
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Organic shape */
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease;
}

.site-logo:hover {
    transform: scale(1.05) rotate(5deg);
}

/* Media Queries */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem; /* 40px */
    }
    h2 {
        font-size: 2rem; /* 32px */
    }
    h3 {
        font-size: 1.5rem; /* 24px */
    }
    .hero-section {
        min-height: 60vh;
    }
    .section {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    .btn-primary-cta {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem; /* 32px */
    }
    h2 {
        font-size: 1.75rem; /* 28px */
    }
    .hero-content p {
        font-size: 1rem;
    }
    .section {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
}

/* Custom Color Variable Definitions for Tailwind JIT */
/* These would typically be configured in tailwind.config.js,
   but for a standalone CSS file, we define them here if Tailwind
   is used purely via CDN and we want to extend its color palette.
   If Tailwind is compiled, these should go into the config file.
   For this context, they're here as CSS variables. */
:root {
    --color-primary-rgb: 80, 184, 184; /* For rgba usage */
    --color-secondary-rgb: 255, 193, 7;
    --color-accent-rgb: 142, 195, 195;
    --color-background-rgb: 240, 248, 248;
}

/* Keyframe Animations */
@keyframes heroBackgroundCycle {
    0% { background-image: url('wellness_food_spread.webp'); }
    15% { background-image: url('healthy_lifestyle_woman.webp'); }
    30% { background-image: url('colorful_vegetables_table.webp'); }
    45% { background-image: url('online_consultation_screen.webp'); }
    60% { background-image: url('open_notebook_blog.webp'); }
    75% { background-image: url('happy_person_exercising.webp'); }
    90% { background-image: url('question_marks_lightbulb.webp'); }
    100% { background-image: url('wellness_food_spread.webp'); }
}

/* Scrollbar Styling (Subtle) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-background);
}

::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 10px;
    border: 2px solid var(--color-background);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}


/* Cookie Banner Additional Styles for Tailwind */
.cookie-banner-hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner-hover-effect:hover {
        transform: none;
    }
}