:root {
    /* Colors */
    --primary-color: #28A745;
    --secondary-color: #17A2B8;
    --background-color: #F8FCF5;
    --footer-bg-color: #212529;
    --button-color: #28A745;
    --text-color: #333333;
    --light-text-color: #f0f0f0;

    /* Section Backgrounds - Claymorphism inspired */
    --section-bg-1: #E0FFE0;
    --section-bg-2: #F0F8EC;
    --section-bg-3: #F8FCF5;
    --section-bg-4: #E0F2F7;
    --section-bg-5: #E7F6DD;
    --section-bg-6: #C8E6C9;
    --section-bg-7: #D7EDDD;

    /* Typography */
    --font-family-primary: 'Inter', sans-serif;
    --font-size-base: 1.125rem; /* 18px */
    --line-height-base: 1.7;

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

    /* Border Radius */
    --border-radius-sm: 8px; /* For cards and containers */
    --border-radius-lg: 9999px; /* For fully rounded buttons */

    /* Shadows - Claymorphism inspired */
    --shadow-clay-light: 5px 5px 10px rgba(0, 0, 0, 0.08), -5px -5px 10px rgba(255, 255, 255, 0.7);
    --shadow-clay-inset: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.5rem;
}

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

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-timing);
}

a:hover {
    color: var(--secondary-color);
}

/* Utility Classes */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.section-padding {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* Section Backgrounds */
.section-bg-1 { background-color: var(--section-bg-1); }
.section-bg-2 { background-color: var(--section-bg-2); }
.section-bg-3 { background-color: var(--section-bg-3); }
.section-bg-4 { background-color: var(--section-bg-4); }
.section-bg-5 { background-color: var(--section-bg-5); }
.section-bg-6 { background-color: var(--section-bg-6); }
.section-bg-7 { background-color: var(--section-bg-7); }


/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: none;
    border-radius: var(--border-radius-lg); /* Rounded-full */
    background-color: var(--button-color);
    color: #ffffff;
    box-shadow: var(--shadow-clay-light); /* Claymorphism soft shadow */
    transition: all var(--transition-speed) var(--transition-timing);
    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn:hover {
    background-color: var(--secondary-color); /* Subtle change on hover */
    box-shadow: var(--shadow-clay-inset); /* Inset shadow for pressed effect */
    transform: translateY(1px); /* Slight press effect */
}

.btn:active {
    box-shadow: var(--shadow-clay-inset);
    transform: translateY(1px);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: #ffffff;
    box-shadow: var(--shadow-clay-light);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    box-shadow: var(--shadow-clay-inset);
    transform: translateY(1px);
}

/* Cards */
.card {
    background-color: var(--background-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-soft); /* Soft, diffused shadow */
    padding: var(--spacing-lg);
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-clay-light); /* More pronounced claymorphism on hover */
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-sm);
    background-color: var(--background-color);
    box-shadow: var(--shadow-clay-inset); /* Inset shadow for input fields */
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    color: var(--text-color);
    transition: all var(--transition-speed) var(--transition-timing);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px var(--primary-color); /* Highlight with primary color */
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* Footer */
footer {
    background-color: var(--footer-bg-color);
    color: var(--light-text-color);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

footer a {
    color: var(--secondary-color);
}

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

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.8s var(--transition-timing) forwards;
    opacity: 0; /* Ensure it's hidden before animation starts */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    body {
        font-size: 1rem;
    }
    .section-padding {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
    }
}

/* Tailwind CSS Integration Note:
   This CSS is designed to complement Tailwind CSS.
   It provides custom styles for base elements, unique components (like .btn and .card with claymorphism),
   and specific overrides that Tailwind's utility classes might not easily achieve
   or to enforce a consistent visual style across the application.
   Utility classes from Tailwind can still be used for layout, spacing, and responsive adjustments.
*/


/* 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;
    }
}