:root {
    /* Primary Colors */
    --primary-500: #3182ce;
    --primary-600: #2b6cb0;
    --primary-700: #2c5282;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Secondary Colors */
    --secondary-500: #14b8a6;
    --secondary-600: #0d9488;

    /* Background Colors - Light theme as default */
    --bg-dark: #faf8f5;
    --bg-darker: #f0ebe3;
    --bg-card: #ffffff;
    --bg-card-hover: #f7f5f2;
    --bg-glass: rgba(255, 255, 255, 0.95);

    /* Text Colors - Dark text for light backgrounds */
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #718096;

    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #faf8f5 100%);

    /* Typography */
    --font-primary: 'Inter', sans-serif;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Shadows - Softer for light mode */
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 15px rgba(49, 130, 206, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;

    /* Layout */
    --sidebar-width: 280px;
    --header-height: 70px;
}

/* Sidebar styling - Light theme with professional look */
.sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f7f5f2 100%);
    border-right: 1px solid #e2e8f0;
}

.sidebar .logo-text {
    color: var(--text-primary);
}

.sidebar .nav-section-title {
    color: var(--text-muted);
}

.sidebar .nav-link {
    color: var(--text-secondary);
}

.sidebar .nav-link:hover {
    background: rgba(49, 130, 206, 0.1);
    color: var(--primary-600);
}

.sidebar .nav-link.active {
    background: var(--gradient-primary);
    color: white;
}

.sidebar .user-name {
    color: var(--text-primary);
}

.sidebar .user-role {
    color: var(--text-muted);
}

.sidebar-header {
    border-bottom: 1px solid #e2e8f0;
}

.sidebar-footer {
    border-top: 1px solid #e2e8f0;
}

.sidebar-user {
    background: rgba(49, 130, 206, 0.05);
}

.sidebar .btn-logout {
    color: var(--text-muted);
}

.sidebar .btn-logout:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

/* Cards and form elements - Light theme defaults */
.stat-card,
.dashboard-card,
.card-glass {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-md);
}

.form-input,
.form-select,
.form-textarea,
.search-input {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: var(--text-primary);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.12);
}

.modal-content {
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.assignment-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.notifications-table th {
    background: #f7f5f2;
    color: var(--text-primary);
    border-bottom: 2px solid #e2e8f0;
}

.notifications-table td {
    border-bottom: 1px solid #edf2f7;
}

.notifications-table tr:hover {
    background: #f7f5f2;
}

.btn-secondary {
    background: #edf2f7;
    color: var(--text-primary);
}

.login-card {
    background: #ffffff;
    box-shadow: var(--shadow-xl);
}