/* Space scale — consumed by components for padding, margin, gap.
   rem-based so spacing scales with user-preferred font size.
   Steps cover fine adjustment (1–3), layout (4–6), and section rhythm (7–11). */

@layer tokens {
    :root {
        --space-0:  0;
        --space-1:  0.25rem;   /*   4 px — hairlines, icon gaps */
        --space-2:  0.5rem;    /*   8 px — tight groups */
        --space-3:  0.75rem;   /*  12 px — UI padding */
        --space-4:  1rem;      /*  16 px — default padding */
        --space-5:  1.5rem;    /*  24 px — card padding, gap between groups */
        --space-6:  2rem;      /*  32 px — section-internal spacing */
        --space-7:  3rem;      /*  48 px — between sections */
        --space-8:  4rem;      /*  64 px — large section rhythm */
        --space-9:  5rem;      /*  80 px — page-level breathing */
        --space-10: 7.5rem;    /* 120 px — marketing section padding */
        --space-11: 10rem;     /* 160 px — hero, major feature blocks */
    }
}