@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Colors */
:root {
    --primary-color: #acd256;
    --dark-color: #222326;
}

/* General Styles */
body {
    @apply bg-gray-100 text-[var(--dark-color)] font-sans;
}

/* Header */
.header {
    @apply w-full py-5 px-10 flex justify-between items-center bg-white shadow-md;
}

/* Logo Container */
.logo-container {
    @apply flex gap-2 items-center;
}

/* Logo */
.logo {
    @apply w-12 h-12;
}

/* Logo Text */
.logo-text {
    @apply font-bold text-xl text-[var(--primary-color)];
}

/* Navigation */
.nav {
    @apply flex gap-5;
}

/* Navigation Links */
.nav-link {
    @apply text-[var(--primary-color)] hover:text-green-700 text-xl transition-all duration-150;
}

/* Logout Button */
.logout-form button {
    @apply bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-green-700 transition;
}

/* Main Content */
.content {
    @apply w-full px-5 py-10;
}

/* Footer */
.footer {
    @apply w-full py-5 bg-white shadow-md text-center;
}

/* Footer Text */
.footer-text {
    @apply text-sm text-gray-600;
}

/* Buttons */
.button {
    @apply bg-[var(--primary-color)] text-white px-5 py-2 rounded-lg shadow-md hover:bg-green-700 transition;
}