/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: spacing.css
 * Description: Semantic Spacing System
 *
 * Depends:
 * tokens.css
 *
 * Version:
 * 2.0.0
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */

:root{

    /* ======================================================
       COMMON GAPS
       Primitive spacing values come from tokens.css.
    ====================================================== */

    --gm-gap-2xs:var(--gm-space-2xs);
    --gm-gap-xs:var(--gm-space-xs);
    --gm-gap-sm:var(--gm-space-sm);
    --gm-gap-md:var(--gm-space-md);
    --gm-gap-lg:var(--gm-space-lg);
    --gm-gap-xl:var(--gm-space-xl);
    --gm-gap-2xl:var(--gm-space-2xl);
    --gm-gap-3xl:var(--gm-space-3xl);


    /* ======================================================
       SECTION SPACING
    ====================================================== */

    --gm-section-spacing-xs:var(--gm-space-2xl);
    --gm-section-spacing-sm:var(--gm-space-3xl);
    --gm-section-spacing-md:80px;
    --gm-section-spacing-lg:96px;
    --gm-section-spacing-xl:120px;


    /* ======================================================
       CONTAINER
    ====================================================== */

    --gm-container-padding-xs:var(--gm-space-md);
    --gm-container-padding-sm:var(--gm-space-lg);
    --gm-container-padding-md:var(--gm-space-xl);
    --gm-container-padding-lg:40px;


    /* ======================================================
       CARD
    ====================================================== */

    --gm-card-padding-sm:20px;
    --gm-card-padding-md:var(--gm-space-xl);
    --gm-card-padding-lg:40px;

    --gm-card-gap:var(--gm-gap-md);


    /* ======================================================
       PRODUCT PAGE
    ====================================================== */

    --gm-product-gap:var(--gm-space-xl);
    --gm-product-block-gap:40px;
    --gm-product-row-gap:var(--gm-space-md);

    --gm-product-section-spacing:var(--gm-space-3xl);


    /* ======================================================
       CONFIGURATOR
    ====================================================== */

    --gm-configurator-gap:var(--gm-space-lg);
    --gm-configurator-row-gap:18px;

    --gm-option-gap:14px;
    --gm-option-padding:18px;


    /* ======================================================
       STORE LOCATOR
    ====================================================== */

    --gm-store-card-gap:20px;
    --gm-store-button-gap:var(--gm-space-sm);
    --gm-store-grid-gap:var(--gm-space-xl);


    /* ======================================================
       GRID
    ====================================================== */

    --gm-grid-gap-sm:var(--gm-space-md);
    --gm-grid-gap-md:var(--gm-space-lg);
    --gm-grid-gap-lg:var(--gm-space-xl);


    /* ======================================================
       STACK
    ====================================================== */

    --gm-stack-xs:var(--gm-space-xs);
    --gm-stack-sm:var(--gm-space-md);
    --gm-stack-md:var(--gm-space-lg);
    --gm-stack-lg:40px;
    --gm-stack-xl:var(--gm-space-3xl);

}