/* Base styles using Bootstrap with custom design system */
:root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 217.2 32.6% 17.5%;
    --card-foreground: 210 40% 98%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --card: 217.2 32.6% 17.5%;
        --card-foreground: 210 40% 98%;
        --primary: 217.2 91.2% 59.8%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
    }
}

/* Dark mode class support */
.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 217.2 32.6% 17.5%;
    --card-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
}

/* Semantic color definitions */
body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

/* Ensure all text uses foreground color by default */
body, p, span, div, a, button, label, h1, h2, h3, h4, h5, h6, li, td, th {
    color: inherit;
}

/* Form elements */
input, textarea, select {
    background-color: hsl(var(--card));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
    border-radius: 0.5rem;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

input::placeholder {
    color: hsl(var(--muted-foreground));
}

/* Card component */
.card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    color: hsl(var(--foreground));
}

/* Button variants */
.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: 0.5rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-radius: 0.5rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: hsl(210 40% 90%);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid hsl(var(--primary));
    color: hsl(var(--primary));
    border-radius: 0.5rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
}

.btn-outline:hover {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Link styling */
a {
    color: hsl(var(--primary));
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Alert styles - extend Bootstrap alerts with custom colors */
.alert-danger {
    background-color: rgba(185, 28, 28, 0.1);
    border-color: hsl(var(--destructive));
    color: hsl(var(--destructive));
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
}

.alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
    color: #22c55e;
}

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

.animate-slide-in {
    animation: slideIn 0.5s ease-out;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .btn-primary, .btn-secondary, .btn-outline {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}