/*
 * IntelliSee spacing scale.
 *
 * Defines an 8px-based spacing rhythm. Pages currently set ad-hoc
 * paddings/margins in their feature CSS — these tokens give us a
 * canonical scale to migrate toward, plus a small handful of stack/row
 * utilities that compose the scale without proliferating "px-3 mt-2"
 * style attribute soup in views.
 *
 * Scale (rem-based, 1rem = 16px):
 *   --space-0   0       --space-5   16px
 *   --space-px  1px     --space-6   20px
 *   --space-1   2px     --space-7   24px
 *   --space-2   4px     --space-8   32px
 *   --space-3   8px     --space-9   40px
 *   --space-4   12px    --space-10  48px
 *                       --space-11  64px
 *
 * Most layouts only need 4–8. Larger steps reserved for hero/section
 * gutters. Always prefer tokens over hard-coded rem/px values in new code.
 */

@layer tokens {
    :root {
        --space-0:   0;
        --space-px:  1px;
        --space-1:   0.125rem;  /*  2px */
        --space-2:   0.25rem;   /*  4px */
        --space-3:   0.5rem;    /*  8px */
        --space-4:   0.75rem;   /* 12px */
        --space-5:   1rem;      /* 16px */
        --space-6:   1.25rem;   /* 20px */
        --space-7:   1.5rem;    /* 24px */
        --space-8:   2rem;      /* 32px */
        --space-9:   2.5rem;    /* 40px */
        --space-10:  3rem;      /* 48px */
        --space-11:  4rem;      /* 64px */

        /* Semantic spacing aliases — pages should reach for these first. */
        --macc-gutter-xs:    var(--space-3);   /*  8px — chip/pill internal */
        --macc-gutter-sm:    var(--space-4);   /* 12px — compact controls   */
        --macc-gutter-md:    var(--space-5);   /* 16px — default card body  */
        --macc-gutter-lg:    var(--space-7);   /* 24px — section gutter     */
        --macc-gutter-xl:    var(--space-9);   /* 40px — page gutter        */

        --macc-stack-xs:     var(--space-2);   /*  4px — label-to-input     */
        --macc-stack-sm:     var(--space-3);   /*  8px — form field stack   */
        --macc-stack-md:     var(--space-5);   /* 16px — card section stack */
        --macc-stack-lg:     var(--space-7);   /* 24px — between sections   */
        --macc-stack-xl:     var(--space-9);   /* 40px — between page blocks*/
    }
}

@layer components {

    /* ----- Stack: vertical rhythm utility ---------------------------- */
    /* Applies consistent vertical gap between direct children. Defaults
       to the common form-field stack; modifiers tighten/loosen. */
    .macc-stack {
        display: flex;
        flex-direction: column;
        gap: var(--macc-stack-md);
    }

    .macc-stack--xs { gap: var(--macc-stack-xs); }
    .macc-stack--sm { gap: var(--macc-stack-sm); }
    .macc-stack--lg { gap: var(--macc-stack-lg); }
    .macc-stack--xl { gap: var(--macc-stack-xl); }

    /* ----- Row: horizontal rhythm utility ---------------------------- */
    /* Inline siblings with consistent gap and centered cross-axis. The
       --wrap modifier permits flex-wrap for toolbar-like rows. */
    .macc-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--macc-stack-sm);
    }

    .macc-row--xs { gap: var(--macc-stack-xs); }
    .macc-row--md { gap: var(--macc-stack-md); }
    .macc-row--lg { gap: var(--macc-stack-lg); }
    .macc-row--wrap { flex-wrap: wrap; }
    .macc-row--end   { justify-content: flex-end; }
    .macc-row--between { justify-content: space-between; }
    .macc-row--center  { justify-content: center; }
    .macc-row--baseline { align-items: baseline; }
    .macc-row--start { align-items: flex-start; }

    /* ----- Cluster: horizontal flow, wraps onto multiple rows -------- */
    /* For toolbars, tag groups, action chips. Same gap on row + column. */
    .macc-cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--macc-stack-sm);
        align-items: center;
    }

    .macc-cluster--xs { gap: var(--macc-stack-xs); }
    .macc-cluster--md { gap: var(--macc-stack-md); }

    /* ----- Section: padded content block ----------------------------- */
    /* Standard card-internal section with consistent gutter. Pair with
       .macc-card or use standalone in non-card content panels. */
    .macc-section {
        padding: var(--macc-gutter-md);
    }

    .macc-section--sm { padding: var(--macc-gutter-sm); }
    .macc-section--lg { padding: var(--macc-gutter-lg); }
    .macc-section--xl { padding: var(--macc-gutter-xl); }

    /* ----- Divider --------------------------------------------------- */
    /* Hairline separator using the canonical border. Add --strong for
       emphasis above headings/section breaks. */
    .macc-divider {
        height: 1px;
        background-color: var(--macc-border-subtle);
        border: 0;
        margin: var(--macc-stack-md) 0;
    }

    .macc-divider--strong {
        background-color: var(--macc-border-soft);
    }

    .macc-divider--flush {
        margin: 0;
    }
}