/* Component styles */
.card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: oklch(0.55 0.22 137.28);
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--accent);
}

.btn-destructive {
    background-color: var(--destructive);
    color: var(--primary-foreground);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.btn-destructive:hover {
    background-color: oklch(0.52 0.245 27.325);
}

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

.status-error {
    background-color: var(--destructive);
    color: var(--primary-foreground);
}

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

.status-info {
    background-color: var(--info);
    color: var(--info-foreground);
}

.text-muted {
    color: var(--muted-foreground);
}

.border-default {
    border-color: var(--border);
}

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

.input-default {
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--foreground);
}

.input-default:focus {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}