/* base.css */
/* Contains CSS variables (light/dark modes), basic body styling, */
/* default typography (h1-h4, p), and global settings. */

/* Light Mode Color Variables (Default) */
:root {
    --primary-color: #2ecc71; /* Brighter green for dark mode */
    --secondary-color: #3498db; /* Brighter blue */
    --accent-color: #f1c40f; /* Yellow accent remains */
    --light-gray: #2c3e50; /* Darker background elements */
    --medium-gray: #34495e; /* Darker borders */
    --dark-gray: #bdc3c7; /* Lighter subdued text */
    --text-color: #ecf0f1; /* Light main text */
    --background-color: #1e272e; /* Very dark background */
    --table-border-color: var(--medium-gray);
    --recommendation-bg: #2c3e50; /* Darker recommendation background */
    --recommendation-border: var(--primary-color);
    --button-text-color: #FFFFFF;
    --input-border-color: var(--medium-gray);
    --container-shadow: rgba(255,255,255,0.05); /* Light shadow for dark mode */
     /* Footer Vars - Dark */
    --footer-bg: #2c3e50;
    --footer-text: #bdc3c7;
    --footer-link: #3498db;
    --footer-link-hover: #2ecc71;
    /* Story & Resource Styles - Dark */
    --story-bg: var(--medium-gray);
    --story-border: var(--secondary-color);
    --resource-bg: var(--medium-gray); /* Use medium gray for consistency */
    --resource-border: var(--accent-color);
    --resource-link-color: #3498db;
    --resource-link-hover: #2ecc71;
}

/* Dark Mode Color Variables */
body.dark-mode {
    --primary-color: #2ecc71; /* Brighter green for dark mode */
    --secondary-color: #3498db; /* Brighter blue */
    --accent-color: #f1c40f; /* Yellow accent remains */
    --light-gray: #2c3e50; /* Darker background elements */
    --medium-gray: #34495e; /* Darker borders */
    --dark-gray: #bdc3c7; /* Lighter subdued text */
    --text-color: #ecf0f1; /* Light main text */
    --background-color: #1e272e; /* Very dark background */
    --table-border-color: var(--medium-gray);
    --recommendation-bg: #2c3e50; /* Darker recommendation background */
    --recommendation-border: var(--primary-color);
    --button-text-color: #FFFFFF;
    --input-border-color: var(--medium-gray);
    --container-shadow: rgba(255,255,255,0.05); /* Light shadow for dark mode */
     /* Footer Vars - Dark */
    --footer-bg: #2c3e50;
    --footer-text: #bdc3c7;
    --footer-link: #3498db;
    --footer-link-hover: #2ecc71;
    /* Story & Resource Styles - Dark */
    --story-bg: var(--medium-gray);
    --story-border: var(--secondary-color);
    --resource-bg: var(--medium-gray); /* Use medium gray for consistency */
    --resource-border: var(--accent-color);
    --resource-link-color: #3498db;
    --resource-link-hover: #2ecc71;
}

/* Apply dark mode based on system preference (if no manual override) */
@media (prefers-color-scheme: dark) {
    body:not(.light-mode) { /* Check if light mode isn't forced */
         --primary-color: #2ecc71;
         --secondary-color: #3498db;
         --accent-color: #f1c40f;
         --light-gray: #2c3e50;
         --medium-gray: #34495e;
         --dark-gray: #bdc3c7;
         --text-color: #ecf0f1;
         --background-color: #1e272e;
         --table-border-color: var(--medium-gray);
         --recommendation-bg: #2c3e50;
         --recommendation-border: var(--primary-color);
         --button-text-color: #FFFFFF;
         --input-border-color: var(--medium-gray);
         --container-shadow: rgba(255,255,255,0.05);
         /* Footer Vars - Dark */
         --footer-bg: #2c3e50;
         --footer-text: #bdc3c7;
         --footer-link: #3498db;
         --footer-link-hover: #2ecc71;
         /* Dark Mode Story/Resource */
         --story-bg: var(--medium-gray);
         --story-border: var(--secondary-color);
         --resource-bg: var(--medium-gray);
         --resource-border: var(--accent-color);
         --resource-link-color: #3498db;
         --resource-link-hover: #2ecc71;
    }
}


body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    padding: 20px;
    max-width: 1000px; /* Max width of the main content area */
    margin: 0 auto; /* Center the content */
    transition: background-color 0.3s ease, color 0.3s ease;
    box-sizing: border-box;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    min-height: 100vh; /* Ensure body takes full viewport height */
}

/* --- Updated H1 Style --- */
h1 {
    font-size: 2.25rem; /* Slightly larger: 36px */
    font-weight: 700;
    color: var(--primary-color); /* Keep primary color */
    text-align: center; /* Center the title */
    margin-bottom: 0.75rem; /* Reduced space below H1 */
    /* Optional: Add a subtle text shadow for dark mode if desired */
    /* text-shadow: 0 1px 3px rgba(0,0,0,0.3); */
}

/* --- Updated .page-description Style --- */
.page-description {
    font-size: 1.125rem; /* Larger: 18px */
    color: var(--text-color); /* Use main text color */
    opacity: 0.9; /* Slightly less emphasis than body text */
    text-align: center; /* Center the description */
    margin-top: 0; /* Remove top margin to bring closer to H1 */
    margin-bottom: 2.5rem; /* Increased space below description */
    max-width: 650px; /* Limit width */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7; /* Match body line-height */
}


h2 {
    color: var(--primary-color);
    margin-top: 2em; /* Add more space above H2 */
    margin-bottom: 1em;
    border-bottom: 1px solid var(--medium-gray); /* Add a subtle separator */
    padding-bottom: 0.3em;
}
h3 {
    color: var(--secondary-color);
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}
h4 {
    color: var(--secondary-color);
    margin-bottom: 5px;
    margin-top: 1em;
}