/* =========================================
   Root Variables
   ========================================= */
:root {
    /* Brand Colors */
    --bs-primary: #0d6efd; /* Default BS primary (can adjust) */
    --bs-primary-rgb: 13, 110, 253;

    /* Custom Theme Colors */
    --bs-accent: #0077b6;
    --bs-accent-rgb: 0, 119, 182;

    /* Light Mode */
    --bs-body-bg: #f8f9fa;
    --bs-card-bg: #ffffff;

    /* Dark Mode */
    --bs-dark-bg: #0f172a;
    --bs-dark-card-bg: #1e293b;
    --bs-dark-border: #334155;
    --bs-dark-text: #e2e8f0;
    --bs-dark-muted: #94a3b8;
}

/* =========================================
   Base Styles
   ========================================= */
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bs-body-bg);
    color: #212529;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =========================================
   Form Controls
   ========================================= */
.form-control {
    border-radius: 0.5rem;
    border-color: #dee2e6;
    transition: all 0.2s ease;
}

.form-control:focus {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-accent-rgb), 0.25);
}

/* =========================================
   Profile Image
   ========================================= */
.profile-image-container {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--bs-accent);
    object-fit: cover;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.profile-image-container:hover {
    transform: scale(1.05);
    border-color: var(--bs-primary);
}

/* =========================================
   Dark Mode Styles
   ========================================= */
.dark-mode {
    background-color: var(--bs-dark-bg) !important;
    color: var(--bs-dark-text);
}

.dark-mode .card,
.dark-mode .bg-white {
    background-color: var(--bs-dark-card-bg) !important;
    border-color: var(--bs-dark-border);
    color: var(--bs-dark-text);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--bs-dark-text) !important;
}

.dark-mode .text-muted,
.dark-mode .text-gray-500 {
    color: var(--bs-dark-muted) !important;
}

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

.dark-mode .form-control::placeholder {
    color: var(--bs-dark-muted);
}

/* =========================================
   Buttons (Optional Enhancement)
   ========================================= */
.btn-primary {
    background-color: var(--bs-accent);
    border-color: var(--bs-accent);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: #0096c7;
    border-color: #0096c7;
}

/* =========================================
   Transitions for Smooth Mode Toggle
   ========================================= */
.card, .form-control, body, .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}