/* Light mode styles */
:root {
    --alert-success-bg: #d4edda;
    --alert-success-border: #c3e6cb;
    --alert-error-bg: #f8d7da;
    --alert-error-border: #f5c6cb;
    --alert-warning-bg: #fff3cd;
    --alert-warning-border: #ffeeba;
    --alert-info-bg: #d1ecf1;
    --alert-info-border: #bee5eb;
    --card-bg: #f9f9f9;
    --card-border: #ddd;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --card-hover-shadow: rgba(0, 0, 0, 0.2);
    --link-color: #339FAB;
    --link-hover-color: #267780;
    --card-bg: hsl(0 0% 100%);
    --card-foreground: hsl(222.2 47.4% 11.2%);
    --alert-bg: 0 0% 100%;
    --alert-foreground: 222.2 47.4% 11.2%;
    --alert-border: 214.3 31.8% 91.4%;
    --alert-success: 142 76% 36%;
    --alert-error: 346 84% 61%;
    --alert-warning: 43 96% 56%;
    --alert-info: 190 90% 50%;
}

/* Dark mode styles */
html[data-theme="dark"] {
    --alert-success-bg: #1e5634;
    --alert-success-border: #2b7a57;
    --alert-error-bg: #5a1a1a;
    --alert-error-border: #8c1d1d;
    --alert-warning-bg: #7c6b1f;
    --alert-warning-border: #9e8b2a;
    --alert-info-bg: #1e3a4c;
    --alert-info-border: #1b6f82;
    --card-bg: #333;
    --card-border: #444;
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-hover-shadow: rgba(0, 0, 0, 0.4);
    --link-color: #88b6e7;
    --link-hover-color: #a0c8f0;
    --card: 0 0% 0%; /* This makes the card background black */
    --card-foreground: hsl(213 31% 91%);
    --alert-bg: 222 47% 11%;
    --alert-foreground: 213 31% 91%;
    --alert-border: 216 34% 17%;
    --alert-success: 142 76% 36%;
    --alert-error: 346 84% 61%;
    --alert-warning: 43 96% 56%;
    --alert-info: 190 90% 50%;
}

/* Alert Styles */
.alert {
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    border: 1px solid transparent;
}

.alert-success {
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
}

.alert-error {
    background-color: var(--alert-error-bg);
    border-color: var(--alert-error-border);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
}

.alert-info {
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
}

/* Card Styles */
.card {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* .card:hover {
    box-shadow: 0 4px 8px var(--card-hover-shadow);
} */

.card a {
    text-decoration: none;
    color: var(--link-color);
}

.card a:hover {
    color: var(--link-hover-color);
}

.card p {
    margin: 5px 0 0;
    font-size: 14px;
}

.card h2 {
    font-size: 16px;
    margin-top: 0;
}

/* Navbar Links */
.navbar-links {
    margin: 15px 0;
}

.navbar-links a {
    text-decoration: none;
    color: var(--link-color);
    margin-right: 15px;
}

.navbar-links a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.card-icon {
    height: 10%;
    width: 10%;
}

/* Alert Styles */
.alert {
    background-color: hsl(var(--alert-bg));
    color: hsl(var(--alert-foreground));
    border: 1px solid hsl(var(--alert-border));
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
    position: relative;
}

.alert::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius) 0 0 var(--radius);
}

.alert-success::before {
    background-color: hsl(var(--alert-success));
}

.alert-error::before {
    background-color: hsl(var(--alert-error));
}

.alert-warning::before {
    background-color: hsl(var(--alert-warning));
}

.alert-info::before {
    background-color: hsl(var(--alert-info));
}