/* Grade Specific Color Coding - Updated for Light Theme Integration */

/* Define main theme colors and page background colors for each grade */
:root {
    /* Grade 5: Blue theme */
    --grade-5-main-theme: #007bff; /* Main Blue */
    --grade-5-page-bg: #e7f3ff;    /* Light Blue Background */
    --grade-5-text-on-main: #ffffff; /* Text color on main blue elements */
    --grade-5-text-on-bg: #0056b3;   /* Darker blue text on light blue background */

    /* Grade 6: Green theme */
    --grade-6-main-theme: #28a745; /* Main Green */
    --grade-6-page-bg: #e9f5e9;    /* Light Green Background */
    --grade-6-text-on-main: #ffffff;
    --grade-6-text-on-bg: #19692c;   /* Darker green text on light green background */

    /* Grade 7: Purple theme (Distinct Purple) */
    --grade-7-main-theme: #8A2BE2; /* Main Purple (BlueViolet) */
    --grade-7-page-bg: #f3e7ff;    /* Light Purple Background */
    --grade-7-text-on-main: #ffffff;
    --grade-7-text-on-bg: #5a009d;   /* Darker purple text on light purple background */

    /* Grade 8: Gold/Yellow theme */
    --grade-8-main-theme: #ffc107; /* Main Gold/Yellow */
    --grade-8-page-bg: #fff8e1;    /* Light Yellow Background */
    --grade-8-text-on-main: #212529; /* Dark text for contrast on yellow */
    --grade-8-text-on-bg: #b38600;   /* Darker yellow/brown text on light yellow background */

    /* Grade 9: Red theme */
    --grade-9-main-theme: #dc3545; /* Main Red */
    --grade-9-page-bg: #fbeeed;    /* Light Red/Pink Background */
    --grade-9-text-on-main: #ffffff;
    --grade-9-text-on-bg: #a71d2a;   /* Darker red text on light red background */

    /* Grade 10: Indigo/Dark Blue theme */
    --grade-10-main-theme: #4B0082; /* Main Indigo */
    --grade-10-page-bg: #e9e0f5;    /* Light Indigo/Purple Background */
    --grade-10-text-on-main: #ffffff;
    --grade-10-text-on-bg: #300052;   /* Darker indigo text on light indigo background */
}

/* Apply page background color when Light Theme is active and specific grade class is on body */
html.theme-light body.grade-5 { background-color: var(--grade-5-page-bg) !important; color: var(--grade-5-text-on-bg) !important; }
html.theme-light body.grade-6 { background-color: var(--grade-6-page-bg) !important; color: var(--grade-6-text-on-bg) !important; }
html.theme-light body.grade-7 { background-color: var(--grade-7-page-bg) !important; color: var(--grade-7-text-on-bg) !important; }
html.theme-light body.grade-8 { background-color: var(--grade-8-page-bg) !important; color: var(--grade-8-text-on-bg) !important; }
html.theme-light body.grade-9 { background-color: var(--grade-9-page-bg) !important; color: var(--grade-9-text-on-bg) !important; }
html.theme-light body.grade-10 { background-color: var(--grade-10-page-bg) !important; color: var(--grade-10-text-on-bg) !important; }

/* General styling for cards within grade pages to ensure readability on new backgrounds */
html.theme-light body[class*="grade-"] .card,
html.theme-light body[class*="grade-"] .tool-card,
html.theme-light body[class*="grade-"] .chapter-card {
    background-color: #ffffff !important; /* Ensure cards are white for contrast */
    color: #212529 !important; /* Ensure text inside cards is dark */
    border: 1px solid #dee2e6 !important;
}

/* Generic element overrides for each grade when Light Theme is active */
/* These selectors should be general enough to cover homepage, grade pages, learner mode, practice mode */

/* --- Grade 5: Light Theme Specific Overrides --- */
html.theme-light body.grade-5 .hero h1,
html.theme-light body.grade-5 .section-title,
html.theme-light body.grade-5 .tool-card h3,
html.theme-light body.grade-5 .chapter-card h3,
html.theme-light body.grade-5 .accent-text,
html.theme-light body.grade-5 h1, html.theme-light body.grade-5 h2, html.theme-light body.grade-5 h3, html.theme-light body.grade-5 h4, html.theme-light body.grade-5 h5, html.theme-light body.grade-5 h6,
html.theme-light body.grade-5 .nav-link.active, /* For active nav items if any */
html.theme-light body.grade-5 .breadcrumb-item.active /* For breadcrumbs */
{
    color: var(--grade-5-main-theme) !important;
    background: none !important; /* Remove default theme gradients if any */
}
html.theme-light body.grade-5 .btn-primary,
html.theme-light body.grade-5 .button-primary,
html.theme-light body.grade-5 .practice-now-btn,
html.theme-light body.grade-5 .btn-learn-mode, /* Example for learn mode button */
html.theme-light body.grade-5 .btn-practice-mode /* Example for practice mode button */
{
    background-color: var(--grade-5-main-theme) !important;
    color: var(--grade-5-text-on-main) !important;
    border: 1px solid var(--grade-5-main-theme) !important;
}
html.theme-light body.grade-5 a:not(.btn):not(.nav-link):not(.logo) { color: var(--grade-5-main-theme) !important; }

/* --- Grade 6: Light Theme Specific Overrides --- */
html.theme-light body.grade-6 .hero h1,
html.theme-light body.grade-6 .section-title,
html.theme-light body.grade-6 .tool-card h3,
html.theme-light body.grade-6 .chapter-card h3,
html.theme-light body.grade-6 .accent-text,
html.theme-light body.grade-6 h1, html.theme-light body.grade-6 h2, html.theme-light body.grade-6 h3, html.theme-light body.grade-6 h4, html.theme-light body.grade-6 h5, html.theme-light body.grade-6 h6,
html.theme-light body.grade-6 .nav-link.active,
html.theme-light body.grade-6 .breadcrumb-item.active
{
    color: var(--grade-6-main-theme) !important;
    background: none !important;
}
html.theme-light body.grade-6 .btn-primary,
html.theme-light body.grade-6 .button-primary,
html.theme-light body.grade-6 .practice-now-btn,
html.theme-light body.grade-6 .btn-learn-mode,
html.theme-light body.grade-6 .btn-practice-mode
{
    background-color: var(--grade-6-main-theme) !important;
    color: var(--grade-6-text-on-main) !important;
    border: 1px solid var(--grade-6-main-theme) !important;
}
html.theme-light body.grade-6 a:not(.btn):not(.nav-link):not(.logo) { color: var(--grade-6-main-theme) !important; }

/* --- Grade 7: Light Theme Specific Overrides --- */
html.theme-light body.grade-7 .hero h1,
html.theme-light body.grade-7 .section-title,
html.theme-light body.grade-7 .tool-card h3,
html.theme-light body.grade-7 .chapter-card h3,
html.theme-light body.grade-7 .accent-text,
html.theme-light body.grade-7 h1, html.theme-light body.grade-7 h2, html.theme-light body.grade-7 h3, html.theme-light body.grade-7 h4, html.theme-light body.grade-7 h5, html.theme-light body.grade-7 h6,
html.theme-light body.grade-7 .nav-link.active,
html.theme-light body.grade-7 .breadcrumb-item.active
{
    color: var(--grade-7-main-theme) !important;
    background: none !important;
}
html.theme-light body.grade-7 .btn-primary,
html.theme-light body.grade-7 .button-primary,
html.theme-light body.grade-7 .practice-now-btn,
html.theme-light body.grade-7 .btn-learn-mode,
html.theme-light body.grade-7 .btn-practice-mode
{
    background-color: var(--grade-7-main-theme) !important;
    color: var(--grade-7-text-on-main) !important;
    border: 1px solid var(--grade-7-main-theme) !important;
}
html.theme-light body.grade-7 a:not(.btn):not(.nav-link):not(.logo) { color: var(--grade-7-main-theme) !important; }

/* --- Grade 8: Light Theme Specific Overrides --- */
html.theme-light body.grade-8 .hero h1,
html.theme-light body.grade-8 .section-title,
html.theme-light body.grade-8 .tool-card h3,
html.theme-light body.grade-8 .chapter-card h3,
html.theme-light body.grade-8 .accent-text,
html.theme-light body.grade-8 h1, html.theme-light body.grade-8 h2, html.theme-light body.grade-8 h3, html.theme-light body.grade-8 h4, html.theme-light body.grade-8 h5, html.theme-light body.grade-8 h6,
html.theme-light body.grade-8 .nav-link.active,
html.theme-light body.grade-8 .breadcrumb-item.active
{
    color: var(--grade-8-main-theme) !important;
    background: none !important;
}
html.theme-light body.grade-8 .btn-primary,
html.theme-light body.grade-8 .button-primary,
html.theme-light body.grade-8 .practice-now-btn,
html.theme-light body.grade-8 .btn-learn-mode,
html.theme-light body.grade-8 .btn-practice-mode
{
    background-color: var(--grade-8-main-theme) !important;
    color: var(--grade-8-text-on-main) !important;
    border: 1px solid var(--grade-8-main-theme) !important;
}
html.theme-light body.grade-8 a:not(.btn):not(.nav-link):not(.logo) { color: var(--grade-8-main-theme) !important; }

/* --- Grade 9: Light Theme Specific Overrides --- */
html.theme-light body.grade-9 .hero h1,
html.theme-light body.grade-9 .section-title,
html.theme-light body.grade-9 .tool-card h3,
html.theme-light body.grade-9 .chapter-card h3,
html.theme-light body.grade-9 .accent-text,
html.theme-light body.grade-9 h1, html.theme-light body.grade-9 h2, html.theme-light body.grade-9 h3, html.theme-light body.grade-9 h4, html.theme-light body.grade-9 h5, html.theme-light body.grade-9 h6,
html.theme-light body.grade-9 .nav-link.active,
html.theme-light body.grade-9 .breadcrumb-item.active
{
    color: var(--grade-9-main-theme) !important;
    background: none !important;
}
html.theme-light body.grade-9 .btn-primary,
html.theme-light body.grade-9 .button-primary,
html.theme-light body.grade-9 .practice-now-btn,
html.theme-light body.grade-9 .btn-learn-mode,
html.theme-light body.grade-9 .btn-practice-mode
{
    background-color: var(--grade-9-main-theme) !important;
    color: var(--grade-9-text-on-main) !important;
    border: 1px solid var(--grade-9-main-theme) !important;
}
html.theme-light body.grade-9 a:not(.btn):not(.nav-link):not(.logo) { color: var(--grade-9-main-theme) !important; }

/* --- Grade 10: Light Theme Specific Overrides --- */
html.theme-light body.grade-10 .hero h1,
html.theme-light body.grade-10 .section-title,
html.theme-light body.grade-10 .tool-card h3,
html.theme-light body.grade-10 .chapter-card h3,
html.theme-light body.grade-10 .accent-text,
html.theme-light body.grade-10 h1, html.theme-light body.grade-10 h2, html.theme-light body.grade-10 h3, html.theme-light body.grade-10 h4, html.theme-light body.grade-10 h5, html.theme-light body.grade-10 h6,
html.theme-light body.grade-10 .nav-link.active,
html.theme-light body.grade-10 .breadcrumb-item.active
{
    color: var(--grade-10-main-theme) !important;
    background: none !important;
}
html.theme-light body.grade-10 .btn-primary,
html.theme-light body.grade-10 .button-primary,
html.theme-light body.grade-10 .practice-now-btn,
html.theme-light body.grade-10 .btn-learn-mode,
html.theme-light body.grade-10 .btn-practice-mode
{
    background-color: var(--grade-10-main-theme) !important;
    color: var(--grade-10-text-on-main) !important;
    border: 1px solid var(--grade-10-main-theme) !important;
}
html.theme-light body.grade-10 a:not(.btn):not(.nav-link):not(.logo) { color: var(--grade-10-main-theme) !important; }

/* Homepage specific overrides if it doesn't have a grade-X class but needs to avoid purple */
/* Assuming homepage might not have a grade-X class, or uses a generic one like body.homepage */
/* If homepage uses default light theme, it will now be blue based on previous styles.css change */
/* If homepage needs a specific color (e.g. neutral or its own theme), add rules here */
/* Example: html.theme-light body.homepage-body-class { ... } */