:root[data-theme="light"] {
    --bg-color: #F8FAFC;
    --card-bg: #FFFFFF;
    --border-color: #E2E8F0;
    --text-color: #334155;
    --heading-color: #0F172A;
    --text-muted: #64748B;
    --hover-bg: #F1F5F9;
    --primary-color: #0284C7;
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --loading-bg: rgba(248, 250, 252, 0.8);
    --chart-grid: #E2E8F0;
    --chart-text: #64748B;

    /* Form Controls */
    & .form-control, 
    & .form-select {
        background-color: var(--card-bg);
        border-color: #CBD5E1;
        color: var(--text-color);
    }

    /* Text & Bootstrap Overrides */
    & .text-muted, & .text-black-50 { color: var(--text-muted) !important; }
    & .text-dark, & .text-body { color: var(--text-color) !important; }
    & .form-label { color: var(--text-color) !important; }
    
    & h1, & h2, & h3, & h4, & h5, & h6,
    & .h1, & .h2, & .h3, & .h4, & .h5, & .h6 { 
        color: var(--heading-color) !important; 
    }

    /* Pagination */
    & .page-link {
        background-color: var(--card-bg);
        border-color: var(--border-color);
        color: var(--primary-color);
        &:hover {
            background-color: var(--hover-bg);
            color: var(--primary-color);
        }
    }
    & .page-item.disabled .page-link {
        background-color: var(--hover-bg);
        border-color: var(--border-color);
        color: var(--text-muted);
    }
}