:root {
    --color-primary: #0084FE;
    --color-success: #13DEB9;
    --color-warning: #FFAE1F;
    --color-error: #FA896B;
}

body {
    @apply bg-gray-100 text-gray-900;
}

h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
}

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

a:hover {
    opacity: 0.8;
}

.container {
    @apply mx-auto px-4;
}

.btn {
    background-color: var(--color-primary);
    @apply text-white font-semibold py-2 px-4 rounded;
}

.btn:hover {
    opacity: 0.9;
}

.btn-success {
    background-color: var(--color-success);
}

.btn-warning {
    background-color: var(--color-warning);
}

.btn-error {
    background-color: var(--color-error);
}

.card {
    @apply bg-white shadow-md rounded-lg p-6 mb-4;
}

.table {
    @apply min-w-full bg-white;
}

.table th, .table td {
    @apply border px-4 py-2;
}

.table th {
    @apply bg-gray-200;
}

.form-input {
    @apply border border-gray-300 rounded-md p-2 w-full;
}

.form-label {
    @apply block text-sm font-medium text-gray-700;
}

.alert {
    @apply bg-red-500 text-white p-4 rounded;
}

.alert-success {
    @apply bg-green-500;
}