/* Base Styles */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-anthrazit);
    background-color: var(--color-white);
    position: relative;
}

/* ============================================
   Grid Background System

   Fixed background grid that:
   - Stays in viewport (doesn't scroll)
   - Has 4 vertical columns
   - 180px row height
   - Positioned outward from content area
   ============================================ */
.grid-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.grid-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;  /* Full viewport width */
    height: 200vh; /* Tall enough for scrolling content */

    /* Grid pattern: horizontal and vertical lines */
    background-image:
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),  /* horizontal */
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);  /* vertical */

    /* Grid sizing:
       - Width: Responsive - based on container width (max 1440px)
       - Add 40px (20px on each side) to extend grid outside content
       - Height: Uses --grid-row-height variable
    */
    background-size:
        calc((min(100vw, var(--container-max-width)) - (2 * var(--container-padding)) - (2 * var(--grid-inset)) + 40px) / 4)
        var(--grid-row-height);

    /* Grid position: Start 20px before header content starts
       On large screens, center the grid area within viewport
    */
    background-position:
        calc(max(var(--container-padding) + var(--grid-inset) - 20px, 50vw - (var(--container-max-width) / 2) + var(--container-padding) + var(--grid-inset) - 20px))
        var(--grid-offset-y);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
}

h1 {
    font-size: var(--font-size-5xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

p {
    line-height: var(--line-height-loose);
}

/* ============================================
   Container System

   Base container uses --container-padding (32px)
   Specific sections add --grid-inset (24px) for alignment with header
   Total padding for aligned sections: 32px + 24px = 56px
   ============================================ */
.container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Section */
.section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    .section {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }
}