:root {
    --primary: #455f88;
    --primary-container: #d6e3ff;
    --on-primary: #f6f7ff;
    --on-primary-container: #38527b;
    --primary-dim: #39537c;
}

body[data-subject="Physics"] {
    --primary: #455f88;
    --primary-container: #d6e3ff;
    --on-primary: #f6f7ff;
    --on-primary-container: #38527b;
    --primary-dim: #39537c;
}

body[data-subject="Math"] {
    --primary: #8a2525;
    --primary-container: #fee2e2;
    --on-primary: #ffffff;
    --on-primary-container: #7f1d1d;
    --primary-dim: #6b1d1d;
}

body[data-subject="Biology"] {
    --primary: #165a3c;
    --primary-container: #d1fae5;
    --on-primary: #ffffff;
    --on-primary-container: #064e3b;
    --primary-dim: #0d402a;
}

body[data-subject="Chemistry"] {
    --primary: #543884;
    --primary-container: #f3e8ff;
    --on-primary: #ffffff;
    --on-primary-container: #581c87;
    --primary-dim: #3d2861;
}

body { font-family: 'Manrope', sans-serif; background-color: #f8f9fa; }
html.dark body { background-color: #0c0f10; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.glass-effect { backdrop-filter: blur(24px); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.tonal-shift { background-color: #f1f4f6; }
.video-gradient-overlay { background: linear-gradient(to top, rgba(13, 17, 23, 0.6) 0%, transparent 40%); }

/* Mobile First Sidebar Overrides */
@media (max-width: 1023px) {
    aside {
        display: none !important;
    }
    header {
        width: 100% !important;
        right: 0 !important;
    }
    main {
        margin-left: 0 !important;
    }
}

.mobile-nav-link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-link:hover {
    transform: translateX(8px);
}

/* Boneyard Exoskeleton Skeletons */
@keyframes boneyard {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background-color: rgba(0,0,0,0.06);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0) 40%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: boneyard 1.5s infinite linear;
}

html.dark .skeleton {
    background-color: rgba(255,255,255,0.06);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0) 40%
    );
}

.skeleton-text { border-radius: 4px; display: inline-block; }
.skeleton-box { border-radius: 12px; }
.skeleton-circle { border-radius: 50%; }