/* ==========================================================================
   Symfony AI — Spacing, radii, shadows, motion
   --------------------------------------------------------------------------
   Generous, pill-and-card driven layout. Cards use a large 1.5rem radius;
   pills/filters go fully rounded. Shadows are soft and tinted violet on the
   code surfaces, neutral elsewhere. Motion is calm: short ease transitions,
   one slow shared color-shift loop, no bounces.
   ========================================================================== */

:root {
    /* ---- Spacing scale (4px base) --------------------------------------- */
    --space-1: 0.25rem; /*  4px */
    --space-2: 0.5rem; /*  8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.5rem; /* 24px */
    --space-6: 2rem; /* 32px */
    --space-7: 3rem; /* 48px */
    --space-8: 4rem; /* 64px */
    --space-9: 6rem; /* 96px */

    /* ---- Radii ---------------------------------------------------------- */
    --radius-xs: 0.375rem; /*  6px — badges, code chips                    */
    --radius-sm: 0.5rem; /*  8px — buttons, feature tabs                 */
    --radius-md: 0.75rem; /* 12px — inputs, small cards, icon tiles       */
    --radius-lg: 1rem; /* 16px — media tiles                          */
    --radius-xl: 1.5rem; /* 24px — cards, terminals (the signature)      */
    --radius-pill: 2rem; /* fully rounded — filters, tags, avatars       */
    --radius-full: 9999px;

    /* ---- Shadows -------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 8px 24px rgba(127, 91, 255, 0.1); /* violet-tinted lift */
    --shadow-lg: 0 8px 32px rgba(127, 91, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-code: 0 8px 32px rgba(127, 91, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 3px rgba(127, 91, 255, 0.35);

    /* Inset "selected" ring used on hoverable cards */
    --ring-inset: inset 0 0 0 2px var(--link);

    /* ---- Layout --------------------------------------------------------- */
    --container-max: 1200px;
    --header-height: 77px;

    /* ---- Motion --------------------------------------------------------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
    --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
    --dur-fast: 0.15s; /* @kind other */
    --dur-base: 0.2s; /* @kind other */
    --dur-slow: 0.35s; /* @kind other */
    /* shared brand color-shift cycle */
    --dur-shift: 60s; /* @kind other */
}