:root {
    --primary-color: #0d6efd;
    --dark-bg: #121212;
    --dark-card: #1e1e1e;
    --dark-text: #ffffff;
    --dark-border: #3f3f3f;
    --dark-input-bg: #2d2d2d;
}

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
}

/* Dark mode styles */
body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

body.dark-mode .card {
    background-color: var(--dark-card);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

body.dark-mode .form-control {
    background-color: var(--dark-input-bg);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

/* Results specific dark mode styles */
body.dark-mode .result-item {
    background-color: var(--dark-card);
    color: var(--dark-text);
}

body.dark-mode .result-item h5,
body.dark-mode .result-item p,
body.dark-mode .result-item .card-text {
    color: var(--dark-text);
}

/* Rating stars in dark mode */
body.dark-mode .result-item .rating {
    color: #ffd700;  /* Make stars more visible in dark mode */
}

/* Preserve hover effect */
.result-item {
    transition: transform 0.2s;
}

.result-item:hover {
    transform: translateY(-2px);
}

/* Input placeholder color in dark mode */
body.dark-mode .form-control::placeholder {
    color: #888;
}

/* Focus states for dark mode */
body.dark-mode .form-control:focus {
    background-color: var(--dark-input-bg);
    border-color: var(--primary-color);
    color: var(--dark-text);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}