/* =========================================================
   INDIGO CUBE DESIGN TOKENS
========================================================= */

:root {
    /* Widths */
    --site-width: 1240px;
    --content-width: 860px;

    /* Responsive gutters */
    --site-gutter: clamp(20px, 5vw, 72px);
    --site-inline-padding:
        max(
            var(--site-gutter),
            calc((100% - var(--site-width)) / 2)
        );

    /* Spacing */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm:
        0 2px 8px rgb(0 0 0 / 0.08);

    --shadow-md:
        0 6px 18px rgb(0 0 0 / 0.14);

    /* Motion */
    --transition-fast: 180ms ease;
    --transition-medium: 280ms ease;

    /* Z-index */
    --z-base: 1;
    --z-overlay: 10;
    --z-header: 100;
    --z-modal: 1000;
}