////
///
/// Center
/// ===========================================================================
///
/// Centering layout primitive.
/// Pure spatial logic. No colors. No shadows.
///
/// @group Flow
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

@layer ss.flow {
    .ss-f-center {
        box-sizing: content-box;
        max-width: var(--ss-f-center-max, var(--ss-measure-default));
        margin-inline: auto;
        padding-inline: var(--ss-f-center-gutter, var(--ss-spacing-4));
    }

    // Center variants
    .ss-f-center-narrow {
        --ss-f-center-max: var(--ss-measure-narrow);
    }
    .ss-f-center-wide {
        --ss-f-center-max: var(--ss-measure-wide);
    }
    .ss-f-center-full {
        --ss-f-center-max: 100%;
    }

    // Text centering
    .ss-f-center-text {
        text-align: center;
    }

    // Flex centering (both axes)
    .ss-f-center-flex {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}