:root {
    /* Core School Palette */
    --school-navy: #002147;
    --school-brown: #5d4037;
    --school-beige: #f5f5dc;
    --school-grey: #607d8b;
    --school-light-grey: #f1f5f9;
    --school-white: #ffffff;

    /* Light theme (Professional School Aesthetic) */
    --background: #fcfcf9;
    /* Very slight beige tint for paper-like feel */
    --foreground: #001a35;
    /* Deep Navy */

    --primary: var(--school-navy);
    --primary-foreground: var(--school-white);

    --secondary: #eaddca;
    /* Sophisticated beige */
    --secondary-foreground: var(--school-navy);

    --muted: #f1f3f5;
    /* Light Grey */
    --muted-foreground: #4a5568;

    --accent: var(--school-brown);
    --accent-foreground: var(--school-white);

    --border: #e2e8f0;
    --input: #ffffff;
    --ring: var(--school-navy);

    /* Typography */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Quicksand', 'Outfit', sans-serif;
    --font-accent: 'Handlee', cursive;
    --font-size-base: 1.125rem;

    /* Spacing */
    --container-padding: 1.5rem;
    --section-padding: 5rem 0;

    /* Transitions */
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Semantic Mappings */
    --header-bg: var(--school-navy);
    --header-text: var(--school-white);
    --nav-link-color: #cbd5e0;
    --header-icon-bg: var(--school-white);
    --header-icon-color: var(--school-navy);
    --hero-bg: linear-gradient(135deg, var(--school-navy) 0%, #003366 100%);
    --hero-text: var(--school-white);
    --footer-bg: #001529;
    /* Even deeper navy */
    --footer-text: #e2e8f0;
    --nav-active-bg: var(--school-brown);
    --card-overlay-bg: linear-gradient(to bottom, rgba(0, 33, 71, 0.2), rgba(0, 33, 71, 0.8));
    --card-title-color: #ffffff;

    /* Theme-Aware Semantic Colors — use these instead of hardcoded school-navy for text */
    --heading-color: var(--school-navy);
    /* Dark navy in light, light text in dark */
    --icon-color: var(--school-navy);
    /* Icon strokes/fills */
    --accent-text: var(--school-brown);
    /* Labels, titles with brown accent */
    --card-bg: var(--background);
    /* Card/panel background */
    --timeline-line: var(--school-navy);
    /* Timeline vertical line */
    --stat-color: var(--school-navy);
    /* Large stat numbers */
}

/* Dark theme (Premium Academic Nocturnal) */
[data-theme="dark"] {
    --background: #000810;
    /* Deeper Midnight */
    --foreground: #f1f5f9;
    /* Soft White */

    --primary: #93c5fd;
    /* Very Light Blue for high visibility */
    --primary-foreground: #000810;

    --secondary: #2d3748;
    /* Slate Grey for buttons */
    --secondary-foreground: #ffffff;

    --muted: #1a202c;
    /* Dark Slate */
    --muted-foreground: #a0aec0;

    --accent: #eaddca;
    /* Lighter Beige/Tan for visibility */
    --accent-foreground: #000810;

    --border: #2d3748;
    --input: #1a202c;
    --ring: #93c5fd;

    /* Semantic Mappings - Dark */
    --header-bg: #000408;
    --header-text: #ffffff;
    --nav-link-color: #cbd5e0;
    --header-icon-bg: #1a202c;
    --header-icon-color: #ffffff;
    --hero-bg: linear-gradient(135deg, #000408 0%, #001a35 100%);
    --hero-text: #ffffff;
    --footer-bg: #000204;
    --footer-text: #cbd5e0;
    --nav-active-bg: var(--school-brown);
    --card-overlay-bg: linear-gradient(to bottom, rgba(0, 8, 16, 0.3), rgba(0, 8, 16, 0.9));
    --card-title-color: #ffffff;

    /* Theme-Aware Semantic Colors - Dark overrides */
    --heading-color: #e2e8f0;
    --icon-color: #93c5fd;
    --accent-text: #eaddca;
    --card-bg: #0d1117;
    --timeline-line: #2d3748;
    --stat-color: #93c5fd;
}