/* ================================================================= */
/* GLOBAL BASE STYLES (style.css) */
/* Applies design variables to base HTML elements and layout. */
/* ================================================================= */

/* --- 0. Global Reset & Box Sizing --- */
/* ------------------------------------------------------------- */
html {
    box-sizing: border-box; /* Apply border-box globally */
    font-size: 100%;        /* Set base font size for rem units */
    scroll-behavior: smooth; /* Optional: Add smooth scrolling */
}

*, *::before, *::after {
    box-sizing: inherit;    /* Inherit border-box */
    margin: 0;
    padding: 0;
}


/* --- 1. Body & Base Typography --- */
/* ------------------------------------------------------------- */
body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    font-weight: var(--font-weight-regular);
    -webkit-font-smoothing: antialiased; /* Optional: Improve font rendering */
    -moz-osx-font-smoothing: grayscale;  /* Optional: Improve font rendering */
}

h1, h2, h3, h4, h5, h6, p {
    text-wrap: pretty;
}

/* --- 2. Headings (h1-h6) --- */
/* ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    /* Define margins consistently */
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2; /* Tighter line height for headings */
}

/* Specific heading sizes */
h1 { font-size: 2.5rem; margin-top: 0; } /* Remove top margin for page titles */
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
/* Define h4-h6 if needed, or remove if unused */
/* h4 { font-size: 1.25rem; } */
/* h5 { font-size: 1rem; } */
/* h6 { font-size: 0.9rem; } */


/* --- 3. Paragraphs & Links --- */
/* ------------------------------------------------------------- */
p {
    /* Define only bottom margin for consistent spacing */
    margin-bottom: var(--spacing-sm);
}

a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color 0.2s ease; /* Slightly faster transition */
}

a:hover {
    color: var(--color-accent-highlight);
}


/* --- 4. Main Layout Container --- */
/* ------------------------------------------------------------- */
.main-container {
    width: 100%;
    max-width: 1400px; /* Max content width */
    margin-left: auto;  /* Center container */
    margin-right: auto; /* Center container */
    /* Horizontal padding to prevent content touching edges */
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* --- 5. Mobile Global Overrides --- */
/* ------------------------------------------------------------- */
@media (max-width: 600px) {

    /* Reduce global padding on small screens to prevent "squeezing" */
    .main-container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}