:root {
    --sb-yellow-dark: #fbbf24;
    --sb-dark-text: #111827;
    --sb-white: #ffffff;
    --sb-gray-bg: #f9fafb;      /* Light gray for page background */
    --sb-border-color: #e5e7eb;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--sb-gray-bg); /* Page background is now light gray */
    color: var(--sb-dark-text);
}

/* === Component Styling === */
.card, .accordion-item {
    background-color: var(--sb-white);
    border: 1px solid var(--sb-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}

.navbar {
    background-color: var(--sb-yellow-dark) !important; /* Navbar is now brand yellow */
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.navbar-brand, .navbar-nav .nav-link {
    color: var(--sb-dark-text);
    font-weight: 600;
}
.navbar .btn-outline-dark {
    border-color: var(--sb-dark-text);
    color: var(--sb-dark-text);
    font-weight: 600;
}
.navbar .btn-outline-dark:hover {
    background-color: var(--sb-dark-text);
    color: var(--sb-yellow-dark);
}

.btn-primary {
    background-color: var(--sb-dark-text);
    color: var(--sb-white);
    border-color: var(--sb-dark-text);
    font-weight: 600;
    border-radius: 0.5rem;
}
.btn-primary:hover {
    background-color: #374151;
    border-color: #374151;
}

.table thead {
    background-color: var(--sb-gray-bg);
}
.table-warning {
    background-color: #fef9c3 !important; /* Lighter yellow for SB highlight */
    border-left: 4px solid var(--sb-yellow-dark);
}

.nav-tabs {
    border-bottom-color: var(--sb-border-color);
}
.nav-tabs .nav-link.active {
    border-color: var(--sb-border-color) var(--sb-border-color) var(--sb-white) !important;
    font-weight: 600;
}

.offcanvas {
    background-color: var(--sb-gray-bg);
}