/* assets/css/style.css */
:root {
    --bg: #f8f9fa;
    --surface: #ffffff;
    --text: #212529;
    --muted: #6c757d;
    --primary: #0d6efd;
    --card: rgba(255, 255, 255, 0.85);
}

[data-theme='dark'] {
    --bg: #000000;
    --surface: #111111;
    --text: #ffffff;
    --muted: #ffffff;
    --primary: #82b1ff;
    --card: rgba(17, 17, 17, 0.96);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
}

[data-theme='dark'] body {
    background-color: #000000;
    color: #ffffff;
}

[data-theme='dark'] .bg-light,
[data-theme='dark'] .card,
[data-theme='dark'] .list-group-item,
[data-theme='dark'] .table,
[data-theme='dark'] .modal-content,
[data-theme='dark'] .alert,
[data-theme='dark'] .form-control,
[data-theme='dark'] .form-select,
[data-theme='dark'] .btn-outline-light,
[data-theme='dark'] .btn-light,
[data-theme='dark'] .dropdown-menu,
[data-theme='dark'] .dropdown-item {
    background-color: #111111 !important;
    color: #ffffff !important;
    border-color: #333333;
}

[data-theme='dark'] .text-muted,
[data-theme='dark'] .small,
[data-theme='dark'] .text-secondary,
[data-theme='dark'] .text-dark,
[data-theme='dark'] .text-black-50 {
    color: #f3f4f6 !important;
}

[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6,
[data-theme='dark'] p,
[data-theme='dark'] span,
[data-theme='dark'] li,
[data-theme='dark'] label,
[data-theme='dark'] td,
[data-theme='dark'] th,
[data-theme='dark'] a {
    color: #ffffff !important;
}

[data-theme='dark'] .navbar-dark,
[data-theme='dark'] .navbar {
    background-color: #000000 !important;
}

[data-theme='dark'] .btn-outline-light {
    border-color: #ffffff;
}

[data-theme='dark'] .btn-outline-light:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.navbar, .footer, .hero-section {
    transition: background 0.3s ease;
}

.hero-section {
    min-height: 60vh;
}

.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.card {
    background: var(--card);
}

.card img {
    object-fit: cover;
    height: 220px;
}

.member-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.member-card:hover {
    transform: translateY(-5px);
}

.btn-outline-light {
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: rgba(255,255,255,0.1);
}

.footer {
    background: #0d1420;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 45vh;
    }
}