/*
 * PURPOSE: Generic structural classes
 * RESPONSIBILITY: Containers, reading widths, spacing stacks.
 * WHAT MUST NOT BE PUT HERE: App shell, Sidebar, Dashboard grid.
 */

/* Max-width wrapper for the entire application */
.app-container {
width: 100%;
max-width: var(--width-app-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-md);
padding-right: var(--space-md);
}

/* Standard content block max-width */
.content-container {
width: 100%;
padding: var(--space-lg) 0;
}

/* Constrained width to prevent eye strain on long reading content */
.reading-container {
width: 100%;
max-width: var(--width-reading-max);
margin-left: auto;
margin-right: auto;
}

/* Vertical Stacking Utilities (adds margin to adjacent siblings) */
.stack-xs > * + * { margin-top: var(--space-xs); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-xl > * + * { margin-top: var(--space-xl); }

/* Basic Flex Layouts */
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
align-items: center;
}

.flex-center {
display: flex;
justify-content: center;
align-items: center;
}