@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.01em;
    color: #111111;
}

:root {
    --primary: #40E0D0;
    --primary-dark: #00B4D8;
    --secondary: #0077B6;
    --black: #111111;
    --white: #FFFFFF;
    --gray: #F5F5F5;
    --dark-gray: #333333;
    --text-gray: #666666;
}

.bg-primary {
    background-color: var(--primary);
}

.bg-primary-dark {
    background-color: var(--primary-dark);
}

.bg-secondary {
    background-color: var(--secondary);
}

.text-primary {
    color: var(--primary);
}

.text-secondary {
    color: var(--secondary);
}

.hover\:bg-primary-dark:hover {
    background-color: var(--primary-dark);
}
/* Custom shadows */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

/* Smooth transitions */
a, button {
    transition: all 0.2s ease;
}

/* Custom container */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}